删除 jquery 生成的字段不起作用答案

【问题标题】：Removing a jquery generated field not working删除 jquery 生成的字段不起作用
【发布时间】：2014-01-23 17:08:23
【问题描述】：

我有一个如下的 HTML 表单：

<div class="form_row">Add Note<input type="checkbox" name="add_note" id="add_note"></div>
    <div class="form_row" id="addDiv" style="display:none;">
        <div class="form_row">
             <h4><a href="#" id="addScnt">Add Another Input Box</a></h4>
            <div id="p_scents">
                <p>
                    <label for="p_scnts"><input type="text" size="20" name="p_scnt_1"/></label>
                </p>
            <div id="new_notes">
        </div>
    </div>
</div>

JavaScript 是：

$('#add_note').click(function(){
    if($("input[type='checkbox'][name='add_note']:checked").length > 0)
    {
    $('#addDiv').show(500);
    }else{
    $('#addDiv').hide(200);
    }
})

  var i = 2;
$('#addScnt').click(function(){

    var html = ''; 
    html += '<p>';
    html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" id="cancel_field">Cancel</a></label>';
    html += '</p>';

    $('#new_notes').append(html);

    i++;
    });
    $('#cancel_field').click(function(){
    alert('Test ')
    $(this).parents('p').remove(); 
});

现在，我的问题是当我单击cancel 时，它什么也不做，既不提醒也不删除父 div。代码有什么问题？

编辑：

JSFiddle Demo

【问题讨论】：

ID 必须是唯一的，这可能是您的问题吗？
@A.Wolff 尝试使用 cancel_field 类，结果相同！
是的，因为您需要使用委托。请下次尝试发布更好的代码缩进；）
你有没有注意到$('#addScnt')里面有两个函数？第一个函数创建元素，第二个添加事件处理程序。尝试将第二个函数移动到第一个函数的末尾。
@Epsil0neR 抱歉误读了你的评论，但你是对的

标签： jquery html append parent

【解决方案1】：

你需要委托，因为它是一个动态生成的元素：

$('#new_notes').on("click", "#cancel_field", function() { ...

查看更新的小提琴：http://jsfiddle.net/tka55/1/

另外，请注意id 应该是唯一的，否则在添加多个元素时，您将再次遇到麻烦。

【讨论】：

没错，我被糟糕的缩进弄糊涂了。但 ID 仍然必须是唯一的
@A.Wolff：是的，当然。谢谢提醒。立即添加到答案中。
感谢 abhitalks.. 工作完美。

【解决方案2】：

你能试试这个吗，已添加class="cancel_field"

      var i = 2;
    $('#addScnt').click(function(){

        var html = ''; 
        html += '<p>';
        html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>';
        html += '</p>';

        $('#new_notes').append(html);

        i++;
        });
        $('.cancel_field').click(function(){
        alert('Test ')
        $(this).parents('p').remove(); 
    });

【讨论】：

【解决方案3】：

当你在 DOM 加载后向 DOM 添加元素时，必须使用 bind 或 on jquery 函数对它们进行不同的绑定。它们不包含在您在 DOM 就绪中定义的事件绑定中。

所以你应该这样做：

 var html = ''; 
        html += '<p>';
        html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>';
        html += '</p>';

        $('#new_notes').append(html);

        i++;
        });
        $('.cancel_field').on('click',function(){
        alert('Test ')
        $(this).parents('p').remove();

【讨论】：

【解决方案4】：

你必须使用 onclick 来实现。如果你使用 click 监听器将不会被附加到添加的元素上。

看这个小提琴：

http://jsfiddle.net/A6Q5C/

$('#new_notes').on('click','#cancel_field',function(){});

当您使用on 时，您将其附加到您要动态附加的父 div。

【讨论】：