Динамично добавленные элементы HTML не могут быть найдены с помощью jQuery
Я реализую древовидный браузер в HTML. При нажатии на узел я вызываю функцию, которая добавляет дочерние элементы узла.Пока все хорошо. Я теперь хочу сразу вызвать обработчик щелчков одного из дочерних элементов для расширения этого также. Моя проблема состоит в том, что jQuery не может найти дочерние элементы, которые были просто добавлены. То, когда я ступаю через в отладчик, мой код, чтобы найти, что элементы вызываются, прежде чем новые элементы представляются браузером, который я предполагаю, является проблемой.
Есть ли некоторое событие, которого я могу ожидать (подобный onload, возможно), который отмечает, когда недавно добавленный HTML видим? Или метод я могу звонить, чтобы вынудить рендеринг произойти ранее? Любые предложения приветствовались бы.
Примечание: Я с тех пор понял, что проблемой был полностью мой отказ, не браузер или jQuery. См. мой ответ ниже.
2 ответа
В конце концов я решил проблему, используя setTimeout (), чтобы отложить мой код до тех пор, пока не будут отрисованы новые элементы. Однако это не идеальное решение, поскольку период ожидания, который я выбрал, довольно произвольный.
Я докопался до сути. Функция, которую я вызывал и добавляла HTML, выполняла это асинхронно через обратный вызов. Поэтому, когда я пытался найти новые элементы HTML, их еще не было. Теперь я изменил свой код, поэтому обратный вызов также отвечает за обработку вновь добавленных элементов, что гарантирует их присутствие.
Вы можете использовать .live () для этого , оснастив его обработчиком кликов вместо простого .click ( ) следующим образом:
$(document).ready(function() {
//instead of $(".myTreeNode").click(....
$(".myTreeNode").live('click', function() {
//Do stuff
});
});
A .click () связывает обработчики событий с элементами, которые он находит при выполнении , поэтому новые элементы не имеют обработчика. .live () вместо этого отслеживает на уровне DOM всплывающие клики, поэтому не имеет значения, добавлены они сейчас или позже. В случае большого количества элементов у вас также есть обработчик событий вместо 1 для каждого элемента, после нескольких элементов это также становится более эффективным.