Как мне оживить несколько динамически созданных элементов DOM?

Question

Возможно, вам будет полезно узнать, откуда я. Jquery nested each problem

Я добавляю divs на страницу с этим кодом:

jQuery("#list").append(
    jQuery("<div>") 
     .attr("id", "Entry") 
     .html(html) 
); 

html это просто строка, содержащая текст и якорь.

Я пытаюсь анимировать новые divs - есть несколько div с id #Entry.

Вот мой код:

jQuery("#Entry").hover(function(){ 
    jQuery(this) 
    .animate({ 
     width:"50%", 
     fontSize: "30px", 
     opacity: 0.3, 
     borderwidth: "15px" 
    }, 500); 
}); 

выше в моей jQuery(document).ready(function(){ } функции, если это имеет значение.

Answer 1

Прежде всего, если вы добавляете более 1 <div> с этим идентификатором, вы делаете это неправильно. id атрибуты должны (должны) быть УНИКАЛЬНЫМИ в документе. Имея более одного элемента с тем же id, Javascript будет скрыт, потому что это не должно произойти. Это было бы эквивалентно двум людям с одинаковым номером социального страхования. :) Общая и лучшая практика, когда дело касается групп элементов, - дать им все класс и выбрать их таким образом.

Прочтите это, вы должны изучить функцию live, которая делает то, что вы хотите. По сути, когда вы запускаете кусок кода в своем документе, он выполняется в текущем состоянии документа текущего документа. Другими словами, только те элементы, которые существуют в этот момент времени (которые соответствуют предоставленному селектору), будут связаны с предоставленным вами событием. Функция live была создана как способ обойти это. Другим решением было бы снова запустить код привязки после добавления нового <div>, но это не так просто, как просто использование live, которое поддерживает события mouseover и mouseout, которые вам понадобятся для выполнения hover.

Answer 2

live() поддерживает все события, включая пользовательские события в последнем jQuery ...