Question

我正在尝试模拟此jsfiddle（代码也如下所示）并修改它以允许用户添加最多4个字段

JS：

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

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

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

HTML：

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

此外，我尝试重新编写和更新jQuery 1.11.0的最新版本的代码，根据jQuery文档更新函数.live()到.on()和.size()到.length() ，但没有运气......代码没有这样做。

非常感谢任何帮助。

Answer 1

您必须使用.on()来附加事件处理程序。另外，将ID替换为class，因为会有多个输入元素。

您可以使用属性.length来获取元素数量

为了删除，您必须委派事件，因为删除锚标记将动态添加到DOM。像这样$('#p_scents').on('click','.remScnt', function(){ });

这适用于jQuery 1.10.1

总的来说，这样的事情应该这样做。

$(function () {
    var scntDiv = $('#p_scents');
    var i = $('.p_scnt').length;

    $('#addScnt').on('click', function () {
        if (i >= 4) return;
        $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
    });

    $('#p_scents').on('click', '.remScnt', function () {
        if (i > 0) {
            $(this).closest('p').remove();
            i--;
        }
    });
});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/tZPg4/13620/

此外，您可以改进添加功能，例如更清洁的代码

$('#addScnt').on('click', function () {
    if (i >= 4) return;
    var newInput = $('<input type="text" size="20" name="p_scnt_' + i + '" placeholder="Input value" />');
    var removeLink = $('<a href="#" class="remScnt">Remove</a></p>');
    var newEl = $('<p></p>').append(newInput).append(removeLink);
    newEl.appendTo(scntDiv);
    i++;
});

jQuery - 允许用户添加最多4个div /用户输入

1 个答案: