Question

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

<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 demo

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

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

JS Fiddle demo

参考文献：

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来清理存储在元素上的任何数据和事件。请注意，这也会导致在通过其他方式删除元素时触发remove事件，例如.empty()

Answer 3

要添加到David Thomas answer，我制作了一个小插件来做你想做的事。

在您的文件中添加此代码。

//@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()上添加一个事件监听器。不对代码进行任何更改，它将起作用。

<强> A very small example

jquery .remove（）方法不会触发.on（'remove'）事件

3 个答案: