頁面轉換后動態添加元素雙重效果

Question

我在我的代碼中添加了來自jQuery的動態，但當我返回一個頁面並返回添加了它們的頁面並按下它們時，它們現在以某種方式單擊兩次。

我試過警告（'某事'）; 當我點擊：

$(document).on('click', '#products a', function() {
  alert('something');
}

當你返回頁面時，它會顯示兩次。 我努力了

$('#products a').remove();

單擊“后退”按鈕時，因為我認為所有元素都添加了兩次，但沒有區別。

我周圍沒有任何東西，也許我需要$（document）.ready（）; 或者與pageinit的東西？

Answer 1

這也稱為多事件觸發問題，由於其架構，它通常用於jQuery Mobile。

這個問題有幾種解決方案：

解決方案1

最佳解決方案是使用pageinit綁定事件。 如果您查看官方文檔，您會發現pageinit只會觸發一次，就像文檔就緒一樣，所以事件不會再被綁定。 這是最好的解決方案，因為您沒有像使用off方法刪除事件時那樣的處理開銷。

工作jsFiddle示例： http ： //jsfiddle.net/Gajotres/AAFH8/

該工作解決方案基於先前的問題示例。

解決方案2

在綁定事件之前刪除事件：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

工作jsFiddle示例： http ： //jsfiddle.net/Gajotres/K8YmG/

解決方案3

使用jQuery Filter選擇器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

因為事件過濾器不是官方jQuery框架的一部分，所以可以在這里找到： http ： //www.codenothing.com/archives/2009/event-filter/

簡而言之，如果速度是您的主要關注點，那么解決方案2比解決方案1好得多。

解決方案4

一個新的，可能是最容易的。

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

工作jsFiddle示例： http ： //jsfiddle.net/Gajotres/Yerv9/

可以在這里找到工作示例。

另一件事，不要使用jQuery Mobile准備文檔，而是使用正確的頁面事件。 最好的解決方案是使用只觸發一次的pageinit， 在這里閱讀更多相關內容。