Jquery的的mouseenter不火HTML變化

Question

後，我有HTML表是這樣的：

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

和jQuery這樣的：

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

，一切工作正常。但是，當我改變推薦的HTML這個：

$.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鼠標突然不起作用（觸發）。

Answer 1

您需要使用委託（「live」）功能。

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

事件會聽所有元素，聽取在第二個參數，即存在或將在「身體」元素來創建。

可以錨功能的第一個非易變的元素，例如

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

Answer 2

問題就在這裏：

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

這個工程的靜態HTML元素，但在你的情況下，當你動態地添加一些HTML。爲了處理動態HTML使用jQuery on()喜歡：

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

，然後再試一次。

Answer 3

這是因爲DOM不像你認爲的那樣工作。您已經用新的HTML有效地替換了該節點的內部結構。這意味着所有以前的#recommendation子節點都已從DOM中刪除。而且，由於這些行的事件監聽器已經在這些行上，所以這些事件監聽器也已經從DOM中刪除。

什麼你需要做的是重新填充表後，請重新安裝事件偵聽器的DOM。在重新填充表格並查看會發生什麼之後，複製代碼以添加事件偵聽器。

或者，作爲Mayank Pandeyz說，使用jQuery的。對功能。那麼你將不必重新安裝。

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"); 
}