即使使用 Jquery，也可以在 onClick 上动态生成输入值

Question

I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.

I have the following code - a dynamic input and a button:

<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>

As for Jquery, I have done the following:

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

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

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

    });
});

The above code keeps generating only the first generated input value? Any ideas or suggestions?

I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.

Answer 1

Add your "input tag" into 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>