JQuery выполнить код на будущих объектах DOM?

Question

Итак, вот вопрос:

Я использую jQuery для нацеливания на элементы DOM и установки их высоты на основе высоты окна браузера, родительских элементов и т. Д. Вот пример:

$('.multiPanelContainer .panelContainer').each(function() { $(this).css('height', document.body.offsetHeight - $(this).offset().top - 13 + 'px') })

Это работает нормально, за исключением случаев, когда вызовы AJAX вводят новые элементы DOM после того, как страница готова.Ранее я использовал live () для привязки обработчиков событий к новым элементам DOM, но все, что я хочу здесь сделать, - это манипулировать css новых элементов.Есть ли способ, чтобы вышеуказанный код вызывался при будущих совпадениях селектора jQuery?Я мог бы связать jQuery с обратной передачей AJAX на серверной части приложения, просто задаваясь вопросом, было ли простое интерфейсное решение.

Вот фон:

Вся эта ситуация меньшечем идеал.Я работаю с существующим приложением ASP.NET, которое было написано для IE6 / IE7 и широко использует операторы выражения css 'expression ()'.Я не принял это решение, поэтому не вините меня.Так или иначе, теперь владельцы приложений хотят иметь возможность использовать приложение в Chrome, которое не понимает упомянутые селекторы.Быстрое и грязное решение, которое рекомендовал мой директор, состояло в том, чтобы преобразовать операторы в операторы jQuery, которые вы видите выше, и включить их в один файл js, связанный с главной страницей.Я думаю, что разделение дизайна на части css и js будет плохо для удобства сопровождения, но у меня есть только такой большой контроль.

Answer 1

$(document).ready(function() {
    do();
    $(document).ajaxComplete(function() {
        do();
    });
});

function do () {
    $('.multiPanelContainer .panelContainer').each(function() {
        $(this).css('height', document.body.offsetHeight - $(this).offset().top - 13 + 'px')
    })
}

Он выполняется каждый раз, когда Ajax-запрос был выполнен

Answer 2

Я думаю, вы можете использовать обработчик live () следующим образом.Думал, я давно этого не делал.

$('.multiPanelContainer .panelContainer').live("load", function(e){ 
     // do your CSS change here. 
})

Answer 3

Вы можете прикрепить пользовательское событие к содержащему элементу (например, тегу body) и вызвать это событие, когда захотите (вызов ajax или что-то еще, что вам может понадобиться ...).

Кстатипочему бы не использовать обычную функцию вместо анонимной и просто вызывать ее для новых элементов, которые вы создаете с помощью ajax?

Answer 4

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