html替换后jquery不适用

Question

我有一些从 $(document).eady() 函数调用的 jquery 函数，如下所示：

<script type="text/javascript">

$(document).ready(function(){
    $('.table_task_type tr').mouseover(function(){
        $(this).addClass("hover");
    });
    $('.table_task_type tr').mouseleave(function(){
        $(this).removeClass("hover");
    });
    $('input:checkbox').click(function() {
        $(this).parent().parent().toggleClass('checked');
    });
});
</script>

问题是我在某些用户操作上替换了部分 html。我这样做是这样的：

$("#my_table").empty();
$("#my_table").html(data);

第一次加载页面时会触发 jquery 事件，但是一旦我的表的 html 被替换，它就不再起作用了。

有什么解决方法吗？

Answer 1

使用jquery live 方法
例子：

$('.table_task_type tr').live('mouseover',function(){
    $(this).addClass("hover");
});

Answer 2

您应该按照前面的海报所建议的那样使用 .on() 方法。您想要做的是将绑定放在正在刷新的容器的父元素上。

<div id="content">
    <div id="my_table">
        <table>
            <tr class="table_task_type">
                <td>foo</td>
                <td>bar</td>
                <td>baz</td>
            </tr>
        </table>
    </div>
</div>


$(function() {
    $('#content').on('hover', '.table_task_type', 
        function() {
            $(this).toggleClass('.rollover');
        }, 
        function() {
            $(this).toggleClass('.rollover');
        });
});

该侦听器绑定到您要重新填充的侦听器的父容器。由于父容器 (#content) 不会重新填充，因此绑定不会中断。它还更快，因为单击事件只需冒泡到 DOM 中的一个节点，而不是一直冒泡到文档。