我试图弄清楚如何执行一些js代码时,一个元素从页面删除:
jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */
有没有专门的活动,比如:
jQuery('#some-element').onremoval( function() {
// do post-mortem stuff here
});
没有用于删除元素的内置事件,但是可以通过伪扩展jQuery的默认删除方法来创建一个事件。注意,必须在实际删除回调以保持引用之前调用回调。
(function() {
var ev = new $.Event('remove'),
orig = $.fn.remove;
$.fn.remove = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
$('#some-element').bind('remove', function() {
console.log('removed!');
// do pre-mortem stuff here
// 'this' is still a reference to the element, before removing it
});
// some other js code here [...]
$('#some-element').remove();
注意:这个答案的一些问题已经被其他的帖子概括出来了。
当通过html() replace()或其他jQuery方法删除节点时,这将不起作用
这个事件出现了
jQuery UI覆盖删除以及
这个问题最优雅的解决方案似乎是:https://stackoverflow.com/a/10172676/216941
为此,可以使用jQuery特殊事件。
简单地说,
设置:
(function($){
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler()
}
}
}
})(jQuery)
用法:
$('.thing').bind('destroyed', function() {
// do stuff
})
回答Pierre和DesignerGuy评论的附录:
要在调用$('.thing').off('destroyed')时不触发回调,请将if条件更改为:if (o.handler && o.type !== 'destroyed'){…}
jQuery的“remove”事件工作正常,没有添加。它可能是更可靠的使用一个简单的技巧,而不是补丁jQuery。
只需在要从DOM中删除的元素中修改或添加一个属性。因此,您可以使用属性“do_not_count_it”触发任何更新函数,该函数将忽略正在被销毁的元素。
假设我们有一个表格,单元格对应的价格,你只需要显示最后的价格:
这是在价格单元格被删除时触发的选择器(我们在表格的每一行中都有一个按钮,这里没有显示)
$('td[validity="count_it"]').on("remove", function () {
$(this).attr("validity","do_not_count_it");
update_prices();
});
这里有一个函数查找表中最后一个价格,不考虑最后一个价格,如果它是被删除的价格。实际上,当"remove"事件被触发,并且当这个函数被调用时,元素还没有被删除。
function update_prices(){
var mytable=$("#pricestable");
var lastpricecell = mytable.find('td[validity="count_it"]').last();
}
最后,update_prices()函数正常工作,然后,DOM元素被删除。