即使使用 Jquery，也可以在 onClick 上動態生成輸入值

Question

我正在嘗試獲取動態生成的輸入的相應值。 換句話說，我有 X 個動態生成的輸入； 這些輸入中的每一個都綁定到一個按鈕。 話雖如此，我希望用戶能夠收到綁定到單擊按鈕的動態生成輸入的警報。 到目前為止我所做的並沒有解決這個問題，無論單擊什么按鈕，都只會生成第一個輸入的值。

我有以下代碼 - 一個動態輸入和一個按鈕：

<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}">  // please note this input is dynamically generated....

<button name="get_id_name"  class="get_id_class" id="get_id_id" >Show Id</button>

至於Jquery，我做了以下：

$('#get_id_id').each(function(index) {

    $(this).click(function() {
        var job_ids = $("[name='jobIdName']");

        console.log('Job Ids -------------- : ' + job_ids);

    });
});

上面的代碼一直只生成第一個生成的輸入值？ 有什么想法或建議嗎？

我看過一些看起來與這篇類似的帖子，但它們已經很老了； 我也在尋找更現代的實現。

Answer 1

將您的“輸入標簽”添加到 div 中：

 var counter = 0; $(document).ready(function(){ $("#get_id_id").click(function() { var divChildren = $(".job_ids").children(); if(counter < divChildren.length){ if(counter == '0'){ console.log($(divChildren).eq(0).val()); }else{ console.log($(divChildren).eq(counter).val()); } counter++; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class ="job_ids"> <input type="hidden" name="jobIdName" value="Test01"> <input type="hidden" name="jobIdName" value="Test02"> <input type="hidden" name="jobIdName" value="Test03"> <input type="hidden" name="jobIdName" value="Test04"> <input type="hidden" name="jobIdName" value="Test05"> </div> <button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>