jQuery - Wie Hover auf Code, der mit prepend

Question

hinzugefügt wurde Ich habe einige Code mit prepend hinzugefügt, wie Sie sehen können. Jedes dieser Elemente (die Tabellenzellen) hat eine Klasse namens "Prädikat". Wenn der Benutzer über diese hinweg schwebt, möchte ich "Prädikat" durch "Prädikat-Über" ersetzen. Ich dachte, ich hätte das, was ich brauche, aber es scheint nicht zu funktionieren.

<script> 
$(document).ready(function() { 
     $("#leo-smart").hover(
     function() { $("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' />"); }, 
     function() { $("#just-added").remove(); } 
     ); 
     $("#007").hover(
     function() { $("#007").prepend("<a href='object.html' border='0'><img src='images/hand.gif' width='22' height='27' id='just-added' alt='View this object' />    </a>"); }, 
     function() { $("#just-added").$("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' alt='View this object' />"); } 
     ); 
     $("#leo-smart").click(
     function() { $("#more-options").prepend("<table><tr><td><div class='predicate'>is a</div></td></tr><tr><td><div class='predicate'>has famous work</div>   </td></tr><tr><td><div class='predicate'>has city (lived in)</div></td></tr><tr><td><div class='predicate'>has patron</div></td></tr><tr><td><div class='predicate'>has birthdate</div></td><tr><td><div class='predicate'>has birthcity</div></td></tr><tr><td><div class='predicate'>has nationality</div></td></tr></table>"); } 
     ); 
     $(".predicate").hover(
     function() { $(this).addClass("predicate-over"); }, 
     function() { $(this).removeClass("predicate-over"); } 
     ); 
}); 

Answer 1

können Sie verwenden, um die prependTo Funktion, die einen Verweis auf das neu hinzugefügte Element zurückgibt, auf diese Weise Sie nicht die ‚just-added‘ id brauchen das Element zu finden, zum Beispiel:

$('<img src="images/hand.gif" width="22" height="27" />') 
    .prependTo('#007') 
    .hover(function() {/**/}, function() {/**/}); 

Answer 2

ich denke, die Grundidee, dass, wenn Sie den DOM sind Modifizieren (Hinzufügen Prädikat Klassen) Sie an diesem Punkt schwebt rebinding werden müssen.

$("#leo-smart").click(
    function() { 
    // do your table jazz 
    $(".predicate").hover(
     function() { $(this).addClass("predicate-over"); }, 
     function() { $(this).removeClass("predicate-over"); } 
    ); 
    } 
); 

Einige Ereignisse in jQuery mit dem live Ereignisse verdrahtet werden. Wenn Sie Live verwenden, verarbeitet jQuery Änderungen am DOM für Sie. Wenn Sie nicht live arbeiten und das DOM ändern, müssen Sie das DOM verdrahten, nachdem das DOM geändert wurde. Das Live-Ereignis unterstützt mouseover und mouseout - wenn Sie diese Ereignisse anstelle von Hover verwenden würden, könnten Sie sie außerhalb des click-Ereignisses verkabeln.

$(".predicate").live("mouseover", function() { 
    $(this).addClass("predicate-over"); 
}); 

$(".predicate").live("mouseout", function() { 
    $(this).removeClass("predicate-over"); 
});