脚本工作多次，动态添加字段

Question

大家

嗨，我发现在网络代码，我做了一些修改，但我不能得到如何得到它的工作原理很多时间在同一页 在这里，你可以找到我的jsfiddle上：http://jsfiddle.net/Scanu/DhpXN/

如果我重复两次html代码（corse）它不起作用我可以做什么来改善代码！？ ：/ 在此先感谢和我的英语我是意大利

HTML

<div> 
     <input type="button" id="btnAdd" value="add another name" /> 
     <input type="button" id="btnDel" value="remove name" /> 
    </div> 
<div class="clonedInput"> 
     Link: <input type="text" name="link1" /> 

    </div> 
<br><br><br><br>​ 

SCRIPT

$('#btnAdd').click(function() { 
    var num = $(".clonedInput").length; // how many "duplicatable" input fields we currently have 
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added 
    var newElem = $('.clonedInput:last').clone(); 

    newElem.children(':first').attr('name', 'link' + newNum); 
    $('.clonedInput:last').after(newElem); 
    $('#btnDel').attr('disabled', false); 
    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled'); 
}); 

$('#btnDel').click(function() { 
    var num = $('.clonedInput').after().length; 
    $('.clonedInput:last').remove(); // remove the last element 
    $('#btnAdd').attr('disabled', false); // enable the "add" button 
    // if only one element remains, disable the "remove" button 
    if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled'); 
}); 

$('#btnDel').attr('disabled', 'disabled'); 

Answer 1

希望抱歉，这是你想看到 http://jsfiddle.net/tonybo/DhpXN/19/

HTML是什么

<table cellpadding="5" border="0"> 
    <tr> 
     <td> 
      <div class="clonedInput"> 
       Link: <input type="text" name="link_1" class="input"/> 
      </div> 
     </td> 
     <td valign="bottom"> 
      <button id="Add"> + </button> 
      <button id="Del"> - </button> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="clonedInput"> 
       Name: <input type="text" name="name_1" class="input"/> 
      </div> 
     </td> 
     <td valign="bottom"> 
      <button id="Add"> + </button> 
      <button id="Del"> - </button> 
     </td> 
    </tr> 
</table>​ 

和JavaScript（这是包裹在的onLoad功能）

var MAX_ELEMENTS = 5; 
$('.clonedInput').each(function (index, element) { 
    var $this = $(this); 
    var $thisParent = $this.parent(); 
    var $input = $this.find("input"); 
    var groupName = $input.attr('name').split('_')[0]; 

    var $addButton = $thisParent.parent().find("#Add"); 
    var $delButton = $thisParent.parent().find("#Del"); 

    $addButton.click(function (e) { 
     var newElementIndex = $thisParent.find(".clonedInput").length; 
     var $newElement = $thisParent.find(".clonedInput:last").clone(); 
     $newElement.find('input').attr('name', groupName + "_" + newElementIndex); 
     $newElement.hide(); 
     $thisParent.find(".clonedInput:last").after($newElement); 
     $newElement.animate({ height: 'toggle', opacity: 'toggle' }, "medium"); 
     $delButton.fadeIn(); 
     if (newElementIndex >= (MAX_ELEMENTS - 1) ) 
      $addButton.fadeOut(); 
    }); 

    $delButton.click(function (e) { 
     var newElementIndex = $thisParent.find(".clonedInput").length; 
     $thisParent.find(".clonedInput:last").animate({ 
      height: 'toggle', 
      opacity: 'toggle' 
     }, { 
      duration : "medium", 
      complete : function() { 
       $(this).remove(); 
      } 
     }); 

     if (newElementIndex <= MAX_ELEMENTS) 
      $addButton.fadeIn(); 

     if (newElementIndex == 1) 
      $delButton.fadeOut(); 
    }); 
});​