Javascript 附加到dom元素的jQuery click事件处理程序

我在用jquery构建电子商务购物车模块时遇到了困难。 假设我用html编写一个标签，如下所示：

+

然后在我的应用程序中瞄准它：

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);
    });
};

这种方法在im显示产品时是可行的，因为它们是由php在页面刷新时显示的，所以我有php在html上生成的所有

+

链接

问题出在签出文件上，这是我显示整个购物车的页面，购物车装满了产品，购物车必须在jQuery和AJAX中生成和处理

我向您展示的代码在购物车页面中不起作用，因为这些链接是通过jQuery为每个产品添加到DOM中的

我一直在研究可能的方法，但很少有，最赞成的是这样做：

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

这种解决方案的问题是，由于资源消耗量大，人们认为这种做法是可以避免的。我自己也可以看到执行时间的差异，在低端设备上需要更长的时间。在这种情况下，是否可以使用一些巧妙的技巧或被认为是良好实践的方法

而不是打电话：

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

---

一开始，我必须在我将元素加载到DOM中之后调用它，然后它们成为目标，然后我只需要使用

self.$ip（）和事件处理程序。在不使用任何解决方法的情况下，解决方案只是更改执行命令的顺序。
有两种主要策略可用于为动态添加到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);


顺便说一句，您使用的
self
变量实际上没有做任何事情，声明
this.$pa
也没有做任何事情。您基本上是在访问
this
对象的属性“$pa”，但没有执行任何操作。
您不知道整个应用程序的结构，因此无法声明
self
不执行任何操作。是的。我只复制了足够的代码，这样就可以回答我的问题了。如果您好奇，我提供了更多的代码，使用
self
和不同的解决方案来澄清我的问题。
$('.container').click(function(event){
  if ($(event.target).is('.add-to-cart') || $(event.target).parents().is('.add-to-cart')) {

    // handle add to cart
  }
})