事件代理浏览器

之间在靶向元件到差失败由于这是从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 '事件表' 的

这里的按钮实例（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错误？什么导致了差异？

来源

2011-05-19 wanovak

我很难相信e.target是第一个跨度，并检查$（e.target）.parent（）没有做你想做的。那些似乎不相容。 – Leopd 2011-05-19 20:36:55

你说得对。刚刚从IDE切换到Vim - 测试了一个过时的文件。编辑... – wanovak 2011-05-19 20:40:41

你为什么不在按钮本身上放一个点击事件？ – DarthJDG 2011-05-19 20:57:26

发表我的评论作为答案。

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

喜欢的东西

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

应该足够了。

来源

2011-05-20 06:29:01

事件代理浏览器

回答

相关问题