JQuery .on()方法没有解雇？

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();
    }
});

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

Answer 1

.on()您使用的表单不处理动态添加的内容.如果要更改它以处理动态内容,则可以使用此方法向其传递公共父对象,然后使用选择器的参数进行筛选:

这种形式的原型.on()是:.on( events-map [, selector] [, data] ).你的代码会像这样工作:

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

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