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显示的，所以我拥有php在html上生成的所有+链接。

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

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

我一直在研究可行的方法而且很少，最赞成的是这样做：

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

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

＆lt; ---编辑（解决方案）---＆gt;

而不是打电话：

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上的另一篇文章，可能比我更好地解释它

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。您基本上是在访问该物业＆＃34; $ pa＆＃34;您的this对象，但没有做任何事情。

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

1 个答案: