使用Jquery動態地向表單添加元素

Question

我已經按照教程創建了一些html和Jquery，它們應該在單擊添加新按鈕時動態添加新元素。 但是，我正在測試jsfiddle並且它無法正常工作，我使用了與教程中使用的完全相同的代碼。 誰能看到我哪里錯了？

http://jsfiddle.net/pocockn/P5uPQ/1/

$(function() {
        var addDiv = $('#addinput');
        var i = $('#addinput p').size() + 1;

        $('#addNew').live('click', function() {
                $('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
                i++;

                return false;
        });

        $('#remNew').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
}); 

Answer 1

從jQuery 1.7開始，不推薦使用.live（）方法。 使用.on（）附加事件處理程序。

所以你應該用on()替換live() on() 。

嘗試這個：

$(function () {
    var addDiv = $('#addinput');
    var i = $('#addinput p').size() + 1;

    $('#addNew').on('click', function () {
        $('<p><input type="text" class="p_new" size="40" name="p_new_' + i + '" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>').appendTo(addDiv);
        i++;
        return false;
    });
    $(document).on('click','.remNew', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

注意：

• 請記住，ID 必須是唯一的。 我在這里發布的代碼中改為class。
• 因為您要動態添加內容，所以remNew必須使用委托。

小提琴

Answer 2

live已被棄用

$(function() {
        var addDiv = $('#addinput');
        var i = $('#addinput p').size() + 1;

        $('#addNew').click(function() {
                $('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
                i++;

                return false;
        });
        alert(i);
        $('#remNew').click(function() { 
                if( i > 3 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});        

Answer 3

你需要改變：

$('#addNew').live('click', function() { ...

至：

$('#addNew').on('click', function() { ...