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

Question

我在用jquery构建电子商务购物车模块时遇到了困难。 可以说，如果我在html中这样写一个标签：

<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) {

该解决方案的问题在于，由于消耗大量资源，也应考虑避免这种做法，我自己可以看到执行时间的差异，在低端设备上花费的时间要长得多。 在这种情况下，是否可以使用一些巧妙的技巧或被认为是好的做法？

<---编辑（解决方案）--->

而不是调用：

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

首先，我必须在将元素加载到DOM之后调用它，然后它们变为可定位的，然后我只需要使用self.$ip(); 并可以附加事件处理程序。 在不使用任何解决方法的情况下，解决方案只是更改执行命令的顺序。

Answer 1

您可以使用两种主要策略为动态添加到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);

第二，您可以在页面上拥有一个主单击事件侦听器，以监听按钮落下的所有单击，然后在单击处理程序中确定用户是否在单击您的元素。 最终这将更加高效，并且您不必在每次向页面添加元素时都添加或删除事件处理程序。 这种模式称为事件委托，这是Stack上的另一篇文章，可能比我能更好地解释它。

什么是DOM事件委托？

$('.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”，但不执行任何操作。