javascript - jQuery UL附加事件？

Question

我正在寻找一种漂亮的方法来处理元素中的追加/删除事件，而不是手动触发事件或类似的东西。

像这样的事情会很棒：

$('#id').on("append", function() { ... }

提前致谢！

Answer 1

正如评论中所说，您可以触发一个append函数：

(function($) {
    var origAppend = $.fn.append;

    $.fn.append = function () {
        return origAppend.apply(this, arguments).trigger("append");
    };
})(jQuery);

$("div").bind("append", function() { alert('Hello, world!'); });

$("div").append("<span>");

此代码取自此答案： https ://stackoverflow.com/a/7167210/2324107

但是由于 remove 有点不同，因为没有任何参数，您将希望定位元素的父元素。我之前修改了一点代码并得到了这个结果：

var origRemove = $.fn.remove;

$.fn.remove = function () {
    if(arguments.length){
        return origRemove.apply(this, arguments).trigger("remove");
    }else{
        var $parent = this.parent();
        console.log(this)
        origRemove.apply(this, arguments);
        $parent.trigger('remove');
        return this
    }
};

如果有参数，它将在所选元素上触发。例如，将$('body').remove('div');触发remove. body但是如果你写$('div').remove();，它会在父级上触发div。

我做了一个小提琴，看看：http: //jsfiddle.net/ZxdU3/

事件侦听器将是appendand remove。如果您使用任何其他 DOM 插入功能（或什至）after，它不会触发。beforeappendTo