Question

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

<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），因此绑定不会中断。它也更快，因为click事件只需要在DOM中冒出一个节点，而不是一直冒泡到文档。

更换html后Jquery不应用

2 个答案: