jQuery - Comment faire pour survoler le code qui a été ajouté en utilisant prepend

Question

J'ai ajouté du code en utilisant le préfixe comme vous pouvez le voir. Chacun de ces éléments (les cellules du tableau) a une classe appelée "prédicat". Lorsque l'utilisateur passe la souris dessus, je veux remplacer "prédicat" par "prédicat-over". Je pensais avoir ce dont j'avais besoin ci-dessous, mais ça ne semble pas fonctionner.

<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

Vous pouvez utiliser la fonction prependTo qui renvoie une référence à l'élément nouvellement ajouté, de cette façon vous n'avez pas besoin de l'identifiant « juste ajouté » pour trouver l'élément, par exemple:

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

Answer 2

Je pense que l'idée principale est que si vous modifiez les DOM (ajout de classes sous-jacentes) vous devez être reconsolidation vol stationnaire à ce moment-là.

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

Certains événements jQuery peuvent être câblés à l'événement live. Lorsque vous utilisez la fonction live, jQuery gère les modifications du DOM pour vous. Si vous n'utilisez pas Live et que vous modifiez le DOM, vous devez câbler le DOM après avoir été modifié. L'événement live supporte le mouseover et le mouseout - si vous deviez utiliser ces événements au lieu de hover, vous seriez en mesure de les câbler en dehors de l'événement click.

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

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