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元素

回答

相关问题