Можно ли с помощью JQuery запускать функцию, когда элемент DOM вызывает .remove ()? - PullRequest
Новая
       14

Можно ли с помощью JQuery запускать функцию, когда элемент DOM вызывает .remove ()?

2 голосов
/ 07 октября 2011

Как показывает вопрос, я пытаюсь создать функцию, которая вызывается, когда элемент DOM удаляется из DOM, очень похоже на деструктор.

Я посмотрел в unload, но, насколько я понимаю, он вызывается только тогда, когда браузер уходит со страницы.

Заранее спасибо!

Ответы [ 4 ]

2 голосов
/ 08 октября 2011

Можно использовать специальные события для построения отслеживания удаления. Я создал пример , который позволяет привязываться к событию removed. Обратите внимание, что этот подход работает только тогда, когда удаление инициируется jQuery (например, вызывая $(…).remove()). Для более общего решения используйте DOMNodeRemoved, но это не сработает в IE.

Чтобы включить отслеживание для вызова элемента $(…).trackRemoval(), элемент вызовет событие removed при удалении его или одного из его родителей. 

// Create a scope so that our variables are not global
(function(){
    /**
     * True while unbinding removal tracking
     */
    var isUntracking = false;

    /**
     * A reference that is only known here that nobody else can play with our special event.
     */
    var dummy = function(){};

    /**
     * Special event to track removals. This could have any name but is invoked during jQuery's cleanup on removal to detach event handlers.
     */
    jQuery.event.special.elementRemoved = {
        remove: function(o){
            if(o.handler===dummy && !isUntracking){
                $(this).trigger('removed');
            }
        }
    };

    /**
     * Starts removal tracking on an element
     */
    jQuery.fn.trackRemoval = function(){
        this.bind('elementRemoved', dummy);
    };

    /**
     * Stops removal tracking on an element
     */
    jQuery.fn.untrackRemoval = function(){
        isUntracking = true;
        this.unbind('elementRemoved', dummy);
        isUntracking = false;
    };
})();

jsFiddle содержит пример кода для использования.

1 голос
/ 07 октября 2011

Попробуйте это: 

(function($) {
    var _remove = $.fn.remove;
    $.fn.remove = function() {
        this.trigger('remove');             // notify removal
        return _remove.apply(this, arguments); // call original
    };
})(jQuery);

использование: 

$(element).bind('remove', callback);
...
// some time later
$(element).remove();

См. Рабочий пример на http://jsfiddle.net/alnitak/25Pnn/

1 голос
/ 07 октября 2011

Я не знаю, если это то, что вы ищете.Не очень красивый код, просто чтобы показать, что я хотел бы использовать: 

// Just for this script's sake, you'll want to do it differently
var body = $("body");
var element = $('#loadingBlock');

// Bind the "destructor" firing event
body.bind("elementDeleted", function (element) {
  // your "destructor" code
});

// Trigger the event, delete element, can be placed in a function, overloaded, etc.
body.trigger("elementDeleted", element);
element.remove();

Конечно, есть решения, основанные на непосредственном наблюдении за DOM, но проблема заключается в совместимости браузера.Вы, вероятно, должны проверить события мутации .

0 голосов
/ 07 октября 2011

Вы всегда можете перегрузить функцию Remove (все объекты javascript могут динамически изменяться во время выполнения) и заменить ее собственной функцией, которая вызывает событие, которое вы можете использовать для реакции на удаление.

...