Question

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

这样做是否正确：

$(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
    }
});

谢谢。

Answer 1

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

在文档加载时执行此操作的好处是，您无需在附加文档之前检查它是否已加载，就像在搜索单击时执行此操作一样，因为您将获得附加的新事件每次点击＆amp;因此，当事件被触发时，您将多次调用相同的函数。

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

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

您可能还希望返回false或使用e.stopPropagation或e.stopDefault，具体取决于您的要求。

Answer 2

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

即时附加事件处理程序

2 个答案: