如何設置使用jquery live（）動態生成的動態輸入名稱

Question

我是JavaScript的新手，我有一個帶兩個文本字段和添加按鈕的html表，現在我寫了一個小jQuery腳本，當單擊添加按鈕時，該腳本又生成了兩個文本字段，所有這一切都成功了，但是我的問題是如何輸入不同的名稱和這些動態生成的字段的ID。 我的代碼如下。

HTML代碼

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

$(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>');

 });
});

請任何幫助如何生成這些字段的不同名稱和ID。

Answer 1

首先，從jq 1.7開始，.live被貶值。使用.delegate

所以..

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

我有個建議可能很好用，

為什么不將輸入字段設為數組，

因此，當您提交它時，它將是一組輸入組

或者您可以輕松地使名稱id基於tr索引

如name_1和id_1，name_2和id_2

Answer 3

我會使用on（）（和off（））。 您將其設置為父容器（在本例中為表），然后偵聽“ addNew”類。 每當將具有class =“ addNew”的新項目添加到表中時，它將處於活動狀態。

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

---

但請注意：在您的代碼中，您這樣做：

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

當然這是行不通的。 它必須是class =“ addNew”