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

Question

Это может быть полезно, чтобы увидеть, откуда я иду. Jquery вкладывает каждую проблему

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

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

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

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

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

Answer 2

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