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 mouseenter突然无法工作（触发）。

Answer 1

问题在于：

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

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

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

再试一次。

Answer 2

您需要使用委派（“实时”）功能。

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

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

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

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

Answer 3

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

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

或者，正如Mayank Pandeyz所说，使用jQuery .on函数。然后你不必再重新安装。

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

在更改html后，Jquery mouseenter不会触发

4 个答案: