jQuery不适用于新项

您好，我想在悬停状态下隐藏/显示表中的行。问题是查询无法处理新动态添加的元素

<button id="myButton">Add New Row</button>
<br/>
<br/>

<br/>
<table id="myTable">
    <tr>
        <td>This is a static row.</td>
    </tr>
</table>



$("#myButton").click(function () {

   var newRow = '<tr><td>This is a dynamically added row.</td></tr>'; 
    $('#myTable').append(newRow);
});



 $('#myTable tr').hover(

       function() {
       $(this).animate({opacity: 0}, 1);

     },
     function() {

         $(this).animate({opacity: 1}, 1);
     }

    );

添加新行






这是一个静态行。
$（“#我的按钮”）。单击（函数（）{
var newRow='这是一个动态添加的行'；
$（“#myTable”）.append（newRow）；
});
$（'#myTable tr'）。悬停(
函数（）{
$（this.animate（{opacity:0}，1）；
},
函数（）{
设置动画（{opacity:1}，1）；
}
);

---

下面是一个示例：

要使用“实时”选择，请使用

所以像这样：

$('body').on({
    mouseenter: function() {
        $( this ).animate({opacity: 0}, 1);
    }, mouseleave: function() {
        $( this ).animate({opacity: 1}, 1);
    }
},'#myTable tr');

尝试事件委派：

 $(document).on("mouseenter", "#myTable tr", function(){
         $(this).animate({opacity: 0}, 1);
 });

 $(document).on("mouseleave", "#myTable tr", function(){
         $(this).animate({opacity: 1}, 1);
 });

---

您应该使用以下内容：

$（static祖先）.on（eventName，dynamicChild，function（）{}）

以下是它在代码中的应用方式：

$("#myButton").click(function () {

   var newRow = '<tr><td>This is a dynamically added row.</td></tr>'; 
    $('#myTable').append(newRow);
});

$('#myTable').on( "mouseover", "tr", function () {
    $(this).animate({opacity: 0}, 1);
});

$('#myTable').on( "mouseout", "tr", function () {
    $(this).animate({opacity: 1}, 1);
});

$（“#我的按钮”）。单击（函数（）{
var newRow='这是一个动态添加的行'；
$（“#myTable”）.append（newRow）；
});
$（'#myTable'）。在（“鼠标悬停”，“tr”，函数（）{
$（this.animate（{opacity:0}，1）；
});
$（'#myTable'）。在（“mouseout”，“tr”，函数（）{
设置动画（{opacity:1}，1）；
});

 JSFiddle：
 < P>你可能想考虑使用CSS3转换来进行类似的事情。只需将其添加到CSS中：

#myTable tr:hover {
    opacity: 0;
    transition: opacity 0.2s ease;
}

CSS可能更快。请参阅以了解利弊概述。
是否有特殊原因将其附加到
文档
而不是类似
$（'#myTable'）。在（“mouseenter”，“tr”，function（）{…
？这就是我总是让这样的东西工作的方式。我想在这种情况下，您可以使用
$（document.body）
，或者干脆使用
$(“closestParent”）。在（…）
上。是的。我也不知道。无论哪种方式都可能存在速度差异，但我对jQuery在事件委托中如何运行的了解还不够，所以不能说是一种方式还是另一种方式。