jQuery點擊事件處理程序附加到DOM元素

我很難用jQuery建立電子商務車模塊。比方說，如果我寫在HTML中的標籤是這樣的：jQuery點擊事件處理程序附加到DOM元素

<div class="add-to-cart">+</div>

，然後在我的應用程序的目標是：

this.$products, 
this.$pa, 
this.$ip, 

this.$products = $('.shopperProducts'), 
this.$pa = this.$products.find('.shopperAdd'); 

var self = this; 

this.$ip = function() { 
    var init = function(action, product) { 
    /.../ 
    }; 

    self.$pa.on('click', function(event) { 
     event.preventDefault(); 
     init('add', this); 
    }); 
};

這種方法是可行的，同時，因爲它們顯示即時顯示產品通過PHP頁面刷新，所以我有所有的+在html上生成的PHP鏈接。

問題是在結帳文件，這是當我顯示整個購物車充滿產品的頁面，購物車必須在jQuery和AJAX中生成和處理。

我向您展示的代碼並不適用於購物車頁面，因爲這些鏈接是通過jQuery將每個產品附加到DOM中的。

我一直在研究可能的方法，並沒有幾個，最有利於爲做到這一點：

$(document).on('click', self.$pa, function(event) {

與解決方案的問題是，它也被認爲是避免實踐中，由於高資源漏，我可以看到執行時間myselfe的差異，在低端設備上需要很長時間。有沒有可以使用的一些巧妙的技巧或在這種情況下被認爲是很好的做法的方法？

< --- EDIT（溶液）--->

調用的相反：

this.$products = $('.shopperProducts'), 
this.$pa = this.$products.find('.shopperAdd');

上開始，我必須調用它元件i之後裝入DOM然後他們成爲可定位的，然後我只需要使用self.$ip();和事件處理程序可以附加。沒有使用任何解決方法，解決方案只是改變執行命令的順序。

來源

2014-11-23 Mevia

有兩種主要策略可用於爲您動態添加到dom的元素添加點擊處理程序。

一個，你可以每次添加點擊處理程序的DOM元素創建一個

var addToCartButton = $('<div class="add-to-cart">+</div>'); 
addToCartButton.on('click', function(){ 
    init('add', this); 
}; 

// then you add your DOM element to the page 
$('.container').append(addToCartButton);

兩個，你可以在頁面上主click事件監聽器監聽所有點擊您的按鈕下降，並在你的點擊處理程序中，找出用戶是否點擊你的元素。這最終效率更高，並且每次向頁面添加元素時都不必添加或刪除事件處理程序。這種模式被稱爲事件委託，和這裏的一對堆疊在另一個帖子裏或許可以解釋它比好，我可以

What is DOM Event delegation?

$('.container').click(function(event){ 
    if ($(event.target).is('.add-to-cart') || $(event.target).parents().is('.add-to-cart')) { 

    // handle add to cart 
    } 
})

順便說一句，你的self變量的使用實際上並沒有做任何事情，也沒有聲明this.$pa。你基本上訪問你的this對象的屬性「$ pa」，但是沒有做任何事情。

來源

2014-11-23 09:35:55 bioball

你不知道整個應用程序的結構，使「自我」不做任何事情的陳述。它的確如此。我只複製了足夠的代碼，因此可以回答我的問題。如果你很好奇，我提供了更多的代碼來澄清使用'self'和不同的解決方案來解決我的問題。 – Mevia 2014-11-23 11:27:01

jQuery點擊事件處理程序附加到DOM元素

回答

相關問題