Событие изменения jQuery для элементов неформ

Question

Я ищу какое-то событие change, но не для элементов формы.

Проблема:
У меня есть table, где tr теги динамически изменяются другим сценарием. Tr элементы изменяются с display:block на display:none или наоборот.

И мне нужно что-то вроде этого:

Событие

будет перечислять изменения любого tr в моем table (не важно, чтобы отобразить none или block), и после любого изменения скрипт будет проверять, все ли tr установлены как display:none а если правда, то сделай что-нибудь.

Answer 1

Изменения DOM, подобные этому, не вызывают события. Вы можете либо обновить код, который модифицирует DOM, чтобы он также отправлял пользовательское событие, либо запросить изменения. Первый вариант наиболее прост в реализации и может выглядеть примерно так:

// Add an event listener for change events
$(document).bind("modified", function() {
    alert("Someone modified " + this);
});

// Modify a table and trigger an event for it
$("#yourTable").css("display", "block").trigger("modified");

Опция опроса будет медленнее и не рекомендуется. Минимальный пример:

setInterval(function() {
    var $table = $("#yourTable");
    if ($table.css("display")!="block") {
        alert("The table changed!");
    }
}, 500);

это будет проверять вашу таблицу каждые 500 миллисекунд.

Answer 2

Я бы создал функции для сокрытия и отображения элементов tr и реализации запускающего в нем события, например, вызова функции tr_was_hidden () или tr_was_shown ().Таким образом, вы можете обрабатывать все события шоу / скрытия при их запуске.

$.fn.showTR = function() {
    return $(this).each(function() {
        $(this).show();
        tr_was_shown();
    });
};

$.fn.hideTR = function() {
    return $(this).each(function() {
        $(this).hide();
        tr_was_hidden();
    });
};

Answer 3

Одна из возможностей - установить для этого таймер.Например:

jQuery(function($) {

    var table = $("selector_for_your_table");
    var timerHandle = setInterval(function() {
        if (table.find("tr:visible").length == 0) {
            // No rows in the table are visible, do something
        }
    }, 500);

});

Это проверяет каждые полсекунды, что может быть слишком часто.Это зависит от размера таблицы и т. Д. Вы также можете отключить эту проверку от всякий раз, когда сможете избежать ненужной работы.Вы можете отменить его, позвонив по номеру cancelInterval(timerHandle);.

Answer 4

В качестве обходного пути вы можете использовать таймер для проверки периодичности, изменился ли некоторый контент или все элементы tr установлены на display:none.