防止jquery tab插件中的事件再生（ajax模式）

我希望你能幫我解決問題;第一，請不要擔心我的語言技能，我來自德國，我不會每天說英語，不幸的是:-(防止jquery tab插件中的事件再生（ajax模式）

我在ajax模式下使用jquery選項卡，並且有一些關於點擊事件的問題。舉個例子：我在我的第一個和第二個選項卡initalizate上的按鈕，例如點擊功能：

$(".new_message").live("click", function() { alert("test"); });

現在想象一下如下：第一個選項卡上的用戶點擊和按鈕標有類「new_message」是持有定義的點擊功能，到這裏一切都很好，但是在選擇第二個選項卡時，它具有相同的按鈕，但存在一個問題：JavaScript警告兩次「測試」，但我只想得到它一次。我搜索了很多來解決這個問題，我得到的所有解決方案都是使用實時功能，但是我這樣做了，並且它不工作。

即使在ajax選項卡中，是否有可能完成此項工作？請注意，標籤的javascript內容在被選中之前並未加載。我沒有緩存我的標籤，因此標籤的內容一次又一次地被觸發（所以如果你點擊標籤1，標籤2和標籤1，腳本提醒三次「測試」）...

我希望你能得到它，什麼; O）乾杯，竹

來源

2010-09-29 Tobias Bambullis

你可以簡單地檢查，如果該事件已經被綁定，因爲它是一個活生生的結合：

var bound = false; // this should exist on the containing page and not in each tab

再用鐵絲它像這樣：

$(function(){ 
    if (!bound) 
    { 
     $(".new_message").live("click", function() { alert("test"); }); 
     bound = true; 
    } 
});

當使用嚮導類型ajax接口時，遇到了一個問題，其中live（）jQuery事件將變爲綁定，綁定然後反彈，如同您在嚮導中來回導航一樣。爲了確保任何現場活動都能正確設置，您需要先調用die（）方法，然後重新綁定。

$("#myClickableThing").die("click").live("click", function() { 
    // do work 
});

並將其添加爲新的jQuery功能，你可以試試這個：

jQuery.fn.resurrect = function (eventType, callback) { 
    $(this).die(eventType).live(eventType, callback); 
};

現在你可以調用復活這樣的：

$("#myClickableThing").resurrect("click", function() { 
    // do work 
});

我寫a blog post約正是這個問題，並創建了一個小幫助函數來處理它。

來源

2010-09-29 18:47:00 hunter

謝謝！那正是我期待的！ – 2010-09-30 14:26:43

想要設置我的回答作爲答案？ – hunter 2010-09-30 17:33:57

在包含選項卡的元素上使用事件委託。

例子：

$('#tabs-container') 
    .bind(
    'click', 
    function(e){ 
     if($(e.target).is('.new_message')){ 
     alert('test'); 
     } 
    } 
);

來源

2010-09-29 18:49:39 Thomas

防止jquery tab插件中的事件再生（ajax模式）

回答

相關問題