Jquery mouseenter ne se déclenche pas après le changement html

Question

Je table html comme ceci:

<div id="recommendation"> 
    <table id="category_selected"> 
    <tr> 
     <td>1</td> 
    </tr> 
    </table> 
</div> 

et jquery comme ceci:

$(function() 
{ 
    $("#recommendation tr").mouseenter(function() 
    { 
     alert("Yes"); 
    } 
} 

et tout fonctionne bien. Mais quand je change html de recommandation ceci:

$.post("path/script.php", {dataIn: dataInEncoded}, function(data, status) 
{ 
    if(status == 'success') 
    { 
     $("#recommendation").html(data); 
     /*(data exactly the same as default html) 
      <table id="category_selected"> 
      <tr> 
       <td>1</td> 
      </tr> 
      </table> 
     */ 
    } 
} 

Jquery mouseenter ne fonctionne pas soudainement (déclencheur).

Answer 1

Vous devez utiliser la fonction déléguée ("live").

$("body").on("mouseenter","#recommendation tr",function() 
{ 
    alert("Yes"); 
} 

l'événement va écouter tous les éléments, écouté dans le second paramètre, qui sont présents ou seront créées dans l'élément « body ».

Vous pouvez ancrer la fonction au premier élément non mutables, par exemple

$("#recommendation").on("mouseenter","tr",function() 
{ 
    alert("Yes"); 
} 

Answer 2

La question est ici:

$("#recommendation tr").mouseenter(function(){ 

cela fonctionne pour élément HTML statique, mais dans votre cas lorsque vous ajoutez du code HTML dynamiquement. Pour faire face à l'utilisation html dynamique jquery on() comme:

$(document).on('mouseenter', '#recommendation tr', function(){ 

et essayez à nouveau.

Answer 3

C'est parce que le DOM ne fonctionne pas comme vous le pensez. Vous avez effectivement remplacé les entrailles de ce nœud par du nouveau HTML. Cela signifie que tous les noeuds précédents qui étaient enfants de #recommendation ont été supprimés du DOM. Et puisque ces lignes ont vos écouteurs d'événement sur eux, ces écouteurs d'événements ont également été retirés du DOM.

Ce que vous devez faire est de rattacher vos écouteurs d'événement au DOM après avoir repeuplé la table. Copiez votre code pour ajouter les écouteurs d'événement après avoir repeuplé la table et voir ce qui se passe. Ou, comme le dit Mayank Pandeyz, utilisez la fonction jQuery .on. Ensuite, vous ne devrez pas rattacher.

Answer 4

<div id="recommendation"> 
    <table id="category_selected"> 
    <tr> 
     <td>1</td> 
    </tr> 
    </table> 
</div> 


document.getElementById("category_selected").onmouseover = function() {mouseOver()}; 
function mouseOver() { 
    alert("Yes"); 
}