Question

我有一个简单的Jquery脚本，它填充了一个包含大量行和单元格的空表。

根据复选框的状态，我想为新填充的表中的所有单元格切换CSS类（当页面加载时不存在，但是在表单提交时由JS函数动态创建）。

我可以在表格单元格上设置“点击”事件，它可以正常工作。

但我尝试使用on()将函数绑定到hover()事件的尝试并未成功。该事件似乎永远不会被触发，也不会产生控制台日志消息。关于我做错了什么的想法？

$("#resultTable").click(function(e){  // This function works fine.
        $(e.target).closest('td').toggleClass('stay');
    });

$("#resultTable td").on("hover", //Same problem for a simpler 'mouseover'
    function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).toggleClass('over');
    },
    function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).toggleClass('over');
    }
    );

Answer 1

如果要动态地将行插入表中，那么.on如果绑定到绑定发生后出现的tds，则无法正常工作。来自文档当调用.on时，绑定事件所绑定的元素必须在绑定发生时存在于DOM中。

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。

这可能有效

$j(document).on("hover", "#resultTable td",
    function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).toggleClass('over');
    },
    function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).toggleClass('over');
    }
    );

如果您只是动态添加行，则可以将事件附加到#resultTable以使委托更快一些。

Answer 2

尝试delegate ..不确定支持on

的版本

$("#resultTable").delegate("td","mouseover", function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).addClass('over');
    });

$("#resultTable").delegate("td","mouseout",function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).removeClass('over');
    });

修改后的DOM中的表格单元格未触发Jquery事件

2 个答案: