事件代理瀏覽器

之間在靶向元件到差失敗由於這是從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

事件代理瀏覽器

回答

相關問題