jquery .remove()方法不触发.on('remove')事件

Question

我使用.remove()方法删除一个html元素，同时，对于这个元素，我有一个事件处理程序，但它不会被触发。为什么会这样？下面是jsFiddle和代码：

<span id='del_span'>Delete</span><br>
<span id='to_del'>I'm going to be deleted</span>

JS

$('#del_span').click(function() {
    $('#to_del').remove();
});
$('#to_del').on('remove', function() {
    alert("I'm being deleted"); //is never triggered
});

Answer 1

remove()方法不会自动触发remove事件(因为不存在这样的事件)，但是可以使用自定义事件手动执行：

$('#del_span').click(function() {
    $('#to_del').trigger('remove').remove();
});
$('#to_del').on('remove', function() {
    alert("I'm being deleted"); //is never triggered
});

JS Fiddle演示。

顺便说一句，在那些支持突变事件的浏览器中，您可以使用：

$('#del_span').click(function() {
    $('#to_del').remove();
});
$('body').on('DOMNodeRemoved', '#to_del', function() {
    alert("I, " + this.id + " am being deleted");
});

JS Fiddle演示。

参考文献：

• trigger()。

Answer 2

当您包含jQuery UI时，$.cleanData方法也会被重写以触发一个remove事件。您可以很容易地模仿这种行为：

// copied from jQuery UI Github, link below
var _cleanData = $.cleanData;
$.cleanData = function( elems ) {
    for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
        try {
            $( elem ).triggerHandler( "remove" );
        // http://bugs.jquery.com/ticket/8235
        } catch( e ) {}
    }
    _cleanData( elems );
};

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L16

$.cleanData由.remove方法调用，以清理存储在元素上的任何数据和事件。注意，这还将导致在通过其他方法(如.empty() )删除元素时触发删除事件。

Answer 3

为了加入戴维·托马斯回答，我制作了一个小插件来做你想做的事情。

将此代码添加到您的文件中。

//@Author Karl-André Gagnon
$.hook = function(){
    $.each(arguments, function(){
        var fn = this
        if(!$.fn['hooked'+fn]){
            $.fn['hooked'+fn] = $.fn[fn];
            $.fn[fn] = function(){
                $.fn['hooked'+fn](arguments);
                $(this).trigger(fn, arguments);
            }
        }
    })
}

然后，这个代码：

$.hook('remove')

这是在.remove()上添加一个事件侦听器。不对代码进行任何更改，它都会工作的。

一个很小的例子