javascript - 使用 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

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

因此您应该将 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 的必须是唯一的。我在此处发布的代码中更改为类。
• 因为您要动态添加内容，所以 remNew 必须使用委托(delegate)。

Fiddle