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

Question

I am having hard time while building e-commerce cart module with jquery. Lets say that if i write a tags in html like this:

<div class="add-to-cart">+</div>

and then target it in my app:

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

This method is possible while im displaying products because they are displayed by php on page refresh so i have all the + links generated by php on html.

The problem is on the checkout file, this is the page when i display entire cart filled with products, cart must be generated and handled in jQuery and AJAX.

And code that i showed you doesnt work in cart page beacuse those links are appended for each product via jQuery into the DOM.

I have been study possible methods and there are few, the most in favour is to do this:

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

The problem with that solution is that it also is considered practice to be avoided due to high resources drain, i can see the difference in execution time myselfe, it takes a lot longer on low end devices. Is there some neat trick that can be used or method that is considered good practice to do in that situation?

<--- EDIT (Solution) --->

Instead of calling:

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

on the beginning, i have to call it after i load elements into DOM and then they became targetable, then i just have to use self.$ip(); and event handlers can be attached. Without using any sort of workarounds, the solution was just to change order of executing commands.

Answer 1

There are two main strategies that you can use for adding click handlers for elements that you dynamically add to the dom.

One, You can add click handlers to the DOM element each time you create one

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

Two, you can have a master click event listener on the page listen for all clicks where your buttons fall, and in your click handler, figure out whether the user is clicking on your element or not. This is ultimately more efficient and you don't have to add or remove event handlers each time you add elements to your page. This pattern is called event delegation, and here's another post on Stack that probably explains it better than I can

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

---

BTW, your use of the self variable doesn't actually do anything, and neither does declaring this.$pa . You're basically accessing the property "$pa" of your this object, but not doing anything it.