Как я могу заставить DOM повторно оценить в Javascript / jQuery?

Question

Я динамически добавляю HTML на веб-страницу и также использую jQuery для управления вещами.

Когда я добавляю HTML-код, jQuery игнорирует его существование.
Например:

$("td.elementToClick").click(...

Прекрасно будет работать с jQuery. Но если где-то в коде я добавляю:

$("tr#myRowToAppend").append("<td class="elementToClick>...</td>");

jQuery будет игнорировать этот новый элемент, если я нажму на него.

Поскольку jQuery связывает события после завершения загрузки страницы, мне нужно одно из двух решений: - Вынудите DOM обновить страницу без изменения текущего макета (я не хочу обновления, поэтому location.reload () не может быть и речи). - Вынудите jQuery добавить этот новый элемент в свой внутренний менеджер событий.

Я не хочу использовать onclick="blabla()", мне действительно нужно использовать jQuery.

Как мне это сделать?

Answer 1

Что вы ищете, так это jQuery live . Из описания документа: «Привязывает обработчик к событию (например, щелчку) для всех текущих и будущих элементов. Может также привязывать пользовательские события».

Существует также плагин liveQuery , который поддерживает более широкий диапазон событий, если хотите.

Answer 2

метод live () облегчит большинство ваших головных болей.

Я вижу, что это происходит чаще всего в IE и с клонированными элементами, чтобы поддерживать IE, вы должны быть намного осторожнее с манипуляциями с DOM.

Я также вижу много вопросов о SO, когда у людей возникают проблемы с копированием / перемещением элементов dom в новые части dom без предварительного клонирования, что не очень хорошо работает в IE.

Так что вы можете использовать live или когда вам нужно обрабатывать события из динамически вставленных элементов DOM, убедитесь, что вы клонировали их с помощью clone (true), чтобы указать, что вы хотите скопировать события:

$("body").append('<div id="one"></div>");

$("#one").mouseover(function(){});

$("body").append( $("#one").clone(true).attr('id','two') );