如何设置使用jquery live（）动态生成的动态输入名称

Question

I am new in JavaScript, I have a html table with two text fields and add button and now I write a little jquery script which generate two more text fields when click on add button all this work success but my problem is how to put different names and ids of these dynamically generated fields. My codes are below.

HTML Code

 <table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
  <tr>
    <td>ACC_CODE</td>
    <td>ACC_NAME</td>
    <td>ACTION</td>
  </tr>
  <tr>
    <td>&nbsp;<input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
    <td>&nbsp;<input type="text" class="click" name="parentinput"  id="parentinput" /></td>
     <td>&nbsp;<input type="button" value="Add New" class="addNew" name="addNew" /></td>
  </tr>
</table>

Jquery Code

$(document).ready(function() {      
 $('.addNew').live({
    click: function(){
 $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');

 });
});

Please any help how to generate different names and ids of these fields.

Answer 1

First of all .live is depreciated since jq 1.7 Use .delegate

so..

    $(document).ready(function() {
       var idIndex=1;
        $(document).delegate("click",".addNew",function() {
            $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
            idIndex++;
        });

    });

Answer 2

I have a suggestion that may work fine,

why not make the input field to be an array,

so when you submit it, it will be a group of input group together

or you can easily make the name id's to be base on tr index

like name_1 and id_1, name_2 and id_2

Answer 3

I would use on() ( and off() ). You set it to the parent container (in this case the table) and listen to the class 'addNew'. Any time a new item with class="addNew" is added to the table, it will be active.

<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
  <tr>
    <td>ACC_CODE</td>
    <td>ACC_NAME</td>
    <td>ACTION</td>
  </tr>
  <tr>
    <td>&nbsp;<input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
    <td>&nbsp;<input type="text" class="click" name="parentinput"  id="parentinput" /></td>
    <td>&nbsp;<input type="button" value="Add New" class="addNew" name="addNew" /></td>
  </tr>
</table>
<script>
$(document).ready(function() {      
  $('.table').on('click', '.addNew',  function() {
    $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
  });
});
</script>

---

But notice: in your code you did this:

<input type="button" value="Add New" class="add" name="add" />

Of course this will not work; it has to be class="addNew"