1

您好，我有以下代码jsfiddle。add 功能正常，但 remove 功能根本不起作用。你能帮我解决问题吗？

HTLM 部分

添加另一个输入框

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

jQuery部分：

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

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><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').on('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
4

2 回答 2

5

一个问题$('#remScnt').on('click', function() {是您试图将事件处理程序绑定到$('#remScnt')集合中的元素，该元素当时是空的。

另一个问题是只有一个元素可以有一个给定的 id，所以如果你想能够添加多行，你必须使用一个类。

所以我推荐这个结构：

    $('<p><label [...] class="remScnt"   [...]  ').appendTo(scntDiv);

    ...

    $('#p_scents').on('click', '.remScnt', function() {

示范

于 2013-05-07T06:25:57.677 回答
1

您在创建元素之前绑定到它。您需要进行实时监控：

 $(document).on('click','#remScnt' ,function() {

工作小提琴：http: //jsfiddle.net/basarat/gnQzk/

也就是说，我建议使用类而不是 id。

IE。就像是 ：

 $(document).on('click', '.remScnt', function() {
于 2013-05-07T06:25:38.267 回答