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

Question

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

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

我可以在表格单元格上设置“单击”事件，并且效果很好。

但是我尝试使用 on() 将函数绑定(bind)到 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 如果绑定(bind)到绑定(bind)发生后出现的 tds，则将不起作用。来自文档当调用 .on 时，绑定(bind)事件的元素必须存在于 DOM 中。

事件处理程序仅绑定(bind)到当前选定的元素；当您的代码调用 .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 以使委托(delegate)更快一些。