Wie kann ich animieren mehrere dynamisch generierten DOM-Elemente?

Question

Dies kann nützlich sein, um zu sehen, wo ich herkomme.Jquery verschachtelte jedes problem

Ich bin hinzufügen divs auf der Seite mit diesem code:

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

html ist nur eine Zeichenkette mit text und einem Anker.

Ich versuche zu animieren, die neuen divs - es gibt mehrere DIVS mit der id #Entry.

Hier ist mein code:

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

Die oben genannten ist in meinem jQuery(document).ready(function(){ } Funktion, wenn diese Angelegenheiten.

Answer 1

Erste von alle, wenn Sie sind das hinzufügen von mehr als 1 <div> mit dieser id, machst du es falsch. id Attribute sollen (müssen) EINDEUTIG in einem Dokument.Mit mehr als 1 element mit dem gleichen id wird Sie Javascript drunter und drüber gehen, weil es nicht geschehen soll.Es wäre das äquivalent von zwei Menschen mit den gleichen social-security-Nummer.:) Das gemeinsame und best practice, wenn es darum geht, Gruppen von Elementen ist, geben Sie alle eine Klasse, und wählen Sie auf diese Weise.

Vergangenheit, sollten Sie sich in die live Funktion, die tut, was Sie wollen.Im wesentlichen, wenn Sie ein Stück code auf Ihrem Dokument bereit, es wird ausgeführt aktuelle Zustand des Dokuments.In anderen Worten, nur die Elemente, die es an diesem Punkt in der Zeit (in übereinstimmung mit den Selektor zur Verfügung gestellt) wird an der Veranstaltung, die Sie zur Verfügung gestellt.Die live Funktion wurde geschaffen, als ein Weg, dies zu umgehen.Eine andere Lösung wäre, führen Sie die binding-code erneut ein, nachdem Sie einen neuen hinzufügen <div>, aber das ist nicht so sauber, wie nur die Verwendung live, unterstützt die mouseover und mouseout Ereignisse, die Sie gehen zu müssen, um das zu tun hover.

Answer 2

leben () unterstützt alle Veranstaltungen, darunter benutzerdefinierte Ereignisse in der aktuellen jQuery ...