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

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 修改和更新代码，更新函数，.live() 到 .on() 和 .size() 到 .length() 每个 jQuery 文档，但没有运气......代码没有那样工作。

非常感谢任何帮助。

Answer 1

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

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

为了删除，您必须委托(delegate)事件，因为删除 anchor 标记将动态添加到 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++;
});