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

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

脚本

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