Question

我有一个带有下拉菜单的表单。当用户从下拉列表中选择某些内容时，它会使用jQuery appendTo：

添加此元素

<p><input type="text" id="callid" name="callid" placeholder="Call ID" /><a href="#" id="remCid"><span class="glyphicon glyphicon-remove"></span></a></p>

我的问题是，当点击glyphicon“X”时，元素不会被删除。

然而，令我感到困惑的是，如果上面的代码是静态编码的形式（不是从我的下拉jQuery菜单添加），单击“X”将删除元素。

fiddle

Answer 1

这是因为当附加事件监听器时，元素#remCid在DOM中不存在。

您可以使用event delegation并将事件处理程序附加到当时存在的公共祖先。在这种情况下，document。

Updated Example

$(document).on('click', '#remCid', function() {
    $(this).parents('p').remove();
});

例如，将其附加到document也可以起作用：

Example Here

.more-fields

作为事件委派的替代方法，您还可以在附加元素后附加事件侦听器。但是，这可能会导致逻辑错误，因为可能会附加多个事件侦听器。

Answer 2

要删除追加元素，必须使用

delegate jquery event handler 

$(document).delegate('#remCid', 'click', function(){

    $(this).parents('p').remove();

});

fiddle

在appendTo（）之后用jQuery删除HTML元素

2 个答案: