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

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

0 голосов
/ 18 июня 2009

Это может быть полезно, чтобы увидеть, откуда я иду. 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(){ }, если это имеет значение.

Ответы [ 2 ]

1 голос
/ 18 июня 2009

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

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

0 голосов
/ 06 апреля 2010

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

...