2

这是 DOM 的简化摘录：

<td>
    <button value="11" class="expand ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
        <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
        <span class="ui-button-text"></span>
    </button>
</td>

对表中的每一行（〜500）重复此操作，并且表的 ID 为“eventTable”

这是按钮实例化（jQueryUI）：

$('.expand').each(function(){
    $(this).button({
        text: false,
        icons: {
            primary: "ui-icon-plus"
        }
    });
});

这是表 #eventTable 上的事件委托的一部分

$('#eventTable').click(function(e){
    if($(e.target).is('.expand'){
        // ...

现在，在 Firefox 3.6.x、IE7、8 中，这可以工作并进入if语句。然而，在 Safari 和 Chrome 中，e.target代表第一个span而不是周围的button.

为什么会这样？我可以克服它，但我希望得到一个解释，这样我以后就不会在不同的场景中遇到同样的问题。为什么 Webkit 是对的而 Trident/Gecko 是错的？是什么导致了差异？

4

1 回答 1

2

发表我的评论作为答案。

如果您只是担心不要click在 DOM 上获得大量处理程序引用，我建议您.delegate()改用。它仅将一个处理程序“绑定”到上下文，并检查事件目标是否与您提供的选择器匹配，如果匹配则触发处理程序。

就像是

$('#eventTable').delegate('click', '.expand', function() {
    // click on the .expand element/s
});

应该足够了。

于 2011-05-20T06:29:01.133 回答