0

我有一个简单的 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');
    }
    );
4

2 回答 2

2

如果您将行动态插入到表中，那么.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以使委托更快一些。

于 2012-09-19T10:36:01.330 回答
0

尝试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');
    });
于 2012-09-19T10:36:08.980 回答