Comment ajouter un événement mouseover sur une ligne dans jquery?

Question

J'ai une table dynamique et peuplant voudrais ajouter un à ma ligne de table fonction mouseover

(mouseover="style.backgroundColor='#E1EBF4'") 

tandis que la ligne de données est ajouté.

function addRecentData(data) { 
    $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>'); 
    var $tr = $('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
} 

Answer 1

EDIT: Notez que si vous n'êtes pas préoccupé par le soutien IE6, vous pouvez utiliser le sélecteur de pseudo CSS :hover pour changer l'arrière-plan. Cela devrait probablement être la première considération.

#newTable ​tr:hover { 
    background: #E1EBF4; 
}​ 

---

Compte tenu de votre code actuel, vous pouvez simplement utiliser votre $tr référence à la table:

function addRecentData(data) { 
    $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>'); 
    var $tr = $('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
    $tr.mouseover(function() { 
     $(this).css('backgroundColor','#E1EBF4'); 
     // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
    }); 
} 

Une autre approche serait d'utiliser inserAfter() au lieu de after() et attribuer immédiatement la variable.

function addRecentData(data) { 
    var $tr = $('<tr><td class="name"></td><td class="id"></td></tr>') 
        .insertAfter('#newTable tr:last'); 
    $tr.find('.name').html(data.Name); 
    $tr.find('.id').html(data.Id); 
    $tr.mouseover(function() { 
     $(this).css('backgroundColor','#E1EBF4'); 
     // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
    }); 
} 

Ou si chaque <tr> doit obtenir le mouseover, vous pouvez utiliser .delegate() sur la #newTable pour prendre soin de la mouseover.

$('#newTable').delegate('tr', 'mouseover', function() { 
    $(this).css('backgroundColor','#E1EBF4'); 
    // this.style.backgroundColor = '#E1EBF4'; // or you could do this 
}); 

Maintenant éléments <tr> obtiendrez automatiquement la fonctionnalité que vous voulez quand ils sont ajoutés à la table.

• http://api.jquery.com/delegate/

Answer 2

Vous devez en tenir à l'ajout de vos événements via jQuery. Vous pouvez mettre le gestionnaire d'événements en place avant en ajoutant vos lignes à l'aide de la méthode de liaison d'événements .live(). En outre, si vous voulez un effet de vol stationnaire, vous êtes mieux avec mouseenter et mouseleave, qui prévoit jQuery les navigateurs qui ne prennent pas en charge déjà:

$('#newTable tr').live('mouseenter', function() { 
    $(this).css('backgroundColor', '#E1EBF4'); 
}).live('mouseleave', function() { 
    $(this).css('backgroundColor', ''); 
}); 

Ceci est également plus efficace que la liaison à chaque élément individuel quand il est ajouté dynamiquement.

Answer 3

Comme indiqué plus haut, vous pouvez utiliser .live

$('#newTable tr').live('mouseenter', function() { 
    $(this).css('background','#E1EBF4'); 
}).live('mouseleave', function() { 
    $(this).css('background',''); 
}); 

Assurez-vous que vous utilisez mouseenter et mouseLeave sur la ligne, non mouseover/mouseout ou il déclenchera lors du déplacement dans et hors des éléments de l'enfant aussi bien et vous verrez un scintillement de votre fond changeant d'avant en arrière.