Question

我已经按照教程创建了一些html和Jquery，它们应该在单击添加新按钮时动态添加新元素。但是，我正在测试jsfiddle并且它不起作用，我使用了与教程中使用的完全相同的代码。谁能看到我哪里错了？

$(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()附加事件处理程序。

因此，您应该将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必须使用委派。

Fiddle

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() { ...

使用Jquery动态地向表单添加元素

3 个答案: