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

jQuery click event handler attached to dom element

本文关键字：jQuery 单击 事件处理 程序 元素 dom      更新时间：2023-09-26

我在使用 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);
    });
};
在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 元素时，都可以向 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"，但不执行任何操作。

相关文章：