Jquery html 更改后 mouseenter 不触发

Question

我有 html table 这样的：

<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 mouseenter 突然不起作用（触发器）。

Answer 1

问题在这里：

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

这适用于静态 html 元素，但在您动态添加一些 html 的情况下。要处理动态 html 使用 jquery on() 如：

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

然后重试。

Answer 2

那是因为 DOM 并不像您想象的那样工作。您已经用新 HTML 有效地替换了该节点的内部结构。这意味着 #recommendation 的所有先前节点都已从 DOM 中删除。由于这些行上有您的事件侦听器，因此这些事件侦听器也已从 DOM.

中删除

您需要做的是在重新填充 table 之后将您的事件侦听器重新附加到 DOM。在重新填充 table 后复制您的代码以添加事件侦听器，看看会发生什么。

或者，如 Mayank Pandeyz 所说，使用 jQuery.on 函数。然后你就不必重新附加了。

Answer 3

您需要使用委托（"live"）函数。

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

该事件将侦听在第二个参数中侦听的所有元素，这些元素存在于或将在 "body" 元素中创建。

您可以将函数锚定到第一个非可变元素，例如

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

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

Jquery html 更改后 mouseenter 不触发

Jquery mouseenter doesn't fire after html change

html

jquery

mouseenter