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

Question

我使用 .remove() 方法删除了一个 HTML 元素，但同时这个元素有一个事件处理器，但是它没有被触发。可能的原因是什么？以下是 jsFiddle 的链接和代码：http://jsfiddle.net/wHPaz/

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

- courses.indepth.dev

---

因为没有删除事件？不过jQuery UI会添加一个。http://jsfiddle.net/wHPaz/1/ - Kevin B

Answer 1

remove()方法不会自动触发remove事件（因为不存在这样的事件），但您可以使用自定义事件手动触发:

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()。

- David Thomas

---

请注意，由于性能问题，不建议使用 DOMNodeRemoved，它已被弃用。https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events - oriadam

Answer 2

当你引入jQuery UI库时，$.cleanData方法被重写，以触发一个移除事件。你可以通过同样的方法轻松模仿这种行为。

// 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()）移除时，这也会导致触发remove事件。

- Kevin B

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()上添加事件监听器。不用更改您的代码，它就能正常工作。 一个非常简单的示例

- Karl-André Gagnon