0

我将事件处理程序附加到表格单元格。单击搜索按钮后会生成该表。搜索按钮还会生成一个链接，单击该链接会打开一个模式弹出窗口，其中包含另一个表格。模式弹出窗口中的表格也应该有相同的事件处理程序附加到其单元格。

这样做可以吗：

$(document).on('mouseenter mouseleave', '.cell-with-action', function(e){
    var action = $(this).find('.action');

    if(e.type == 'mouseenter'){
        //do something
    }
    else{
        //do something else
    }
});

还是在单击搜索按钮和链接按钮时附加它更好？这样做会有所不同：

$('.table-with-action').on('mouseenter mouseleave', '.cell-with-action', function(e){
    var action = $(this).find('.action');

    if(e.type == 'mouseenter'){
        //do something
    }
    else{
        //do something else
    }
});

谢谢你。

4

2 回答 2

2

这两个选项（针对您的问题，而不是您的代码）之间的主要区别在于，与单击搜索按钮时相比，第一个选项将在文档加载时加载。

在文档加载时执行此操作的好处是，您不必在附加它之前检查它是否已加载，就像您在搜索点击时执行此操作时一样，因为您将为每次点击附加一个新事件& 所以当事件被触发时，你会多次调用同一个函数。

如果您有一个快速加载的页面（即不是很大/动态），那么使用第一个选项是有意义的。否则使用第二个 IMO。

至于您的代码：第一个片段附加到文档，而第二个片段附加到表格。因此，根据您拥有的这些表的数量，您最终可能会遇到冲突。此外，使用更具体的选择器.table-with-action，事件在被操作之前不必像 $(document) 那样在 DOM 树上冒泡。更重要的是，无关元素上的事件根本不会到达处理程序，这意味着 jQuery 不必过滤无关事件（如 Jan 所述）。

根据您的要求，您可能还希望返回 false 或使用 e.stopPropagation 或 e.stopDefault。

于 2013-06-19T08:11:46.053 回答
-1

您的第一个示例应该没问题，但是您可能希望将事件处理程序添加到<body>元素而不是文档，并使用元素类型（即：'table td.cell-with-action'）限定类以提高性能原因。

于 2013-06-19T08:09:22.530 回答