javascript - 将输入字段添加到表单

Question

我试图使用这个：

小提琴

但似乎他使用的 jQuery 版本已经过时了。

但是，我在他的代码中看到的唯一必要更新是更改.live()为.on(). 但是，如果我更改了删除按钮，它将无法工作。

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

有人知道为什么吗？

Answer 1

看起来它需要重写，几个不推荐使用的方法，从字符串创建的动态元素，针对所有父母（），相同的 ID 等：

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

    $('#addScnt').on('click', function (e) {
        e.preventDefault();
        var p = $('<p />'),
            l = $('<label />', {for: 'inp_'+i}),
            j = $('<input />', {type: 'text', 
                                id: 'inp_'+i, 
                                size: 20,
                                name: 'p_scnt_' + i,
                                placeholder: 'Input Value'
                               }),
            a = $('<a />', {href : '#', 
                            id: 'remScnt_' + i,
                            'class' : 'remScnt',
                            text: 'Remove'
                           });

        p.append(l.append(j), a).appendTo(scntDiv);
        i++;
    });

    scntDiv.on('click', '.remScnt', function (e) {
        e.preventDefault();
        if (i > 2) {
            $(this).closest('p').remove();
            i--;
        }
    });
});

小提琴

Answer 2

1. ID 必须是唯一的（但这不会引起麻烦）
2. 新添加的内容需要委托。

---

jQuery

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

    $('#addScnt').on('click', function () {
        $('<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++;
        return false;
    });

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

HTML

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

<div class="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>

这完美地工作：http: //jsfiddle.net/uFkPx/