Question

我正在尝试使用JQuery on()方法。基本上我正在尝试写一个类似于此处的警告框。如果您曾试图对自己的评论或主题进行投票，那么您就会知道我在说什么。

我有一个像下面这样的JS函数，它只返回带有消息的框。

function alert_box(msg){
    return "<div class='alert-box'><p>" + msg + "<br /><i>( Click to Close )</i></p></div>";
}

然后我按照这样的方式调用警告框

$(that).append( alert_box(data.err) );

以上按预期工作，但问题是这个功能没有触发。 .alert-box会添加上面的代码，但不会被删除。

$('.alert-box').on({
    click: function() {
        $('.alert-box').remove();
    }
});

我认为它与在DOM之后添加的.alert-box类有关。有人对此有任何指示吗？

Answer 1

您使用的.on()形式无法处理动态添加的内容。如果你想改变它来处理动态内容，那么你可以使用它来传递一个共同的父对象，然后选择一个参数来过滤：

.on()形式的原型是：.on( events-map [, selector] [, data] )。你的代码就是这样的：

$(document.body).on({
    click: function() {
        $('.alert-box').remove();
    }
}, '.alert-box');

在这个新表单中，您将事件处理程序附加到父对象，然后查找与“.alert-box”选择器匹配的任何子项中的单击。最好选择一个与您的点击次数接近的父对象，但不会改变。我在这里使用document.body只是因为我知道存在并且你没有显示你的其他HTML让我知道还有什么可以使用。