1

I am having problem with $(".useful-box").on("click", this.ourClickDispatcher.bind(this)). I am not able to make this code work when I enable the "Paginate using AJAX" option for reviews post type. The problem is because I am unable to like reviews on the 2nd or 3rd page.

Everything works and I am able to like my reviews if I disable the "Paginate using AJAX" feature, however I want to use it.

class Useful {
  constructor() {
    this.events();
  }
  events() {

    $(".useful-box").on("click", this.ourClickDispatcher.bind(this));

  }
  ourClickDispatcher(e) {
    var currentUsefulBox = $(e.target).closest(".useful-box");

    if (currentUsefulBox.attr('data-exists') == 'yes') {
      console.log('dy');
      this.deleteUseful(currentUsefulBox);
    } else {
      console.log(currentUsefulBox);
      this.createUseful(currentUsefulBox);
    }
  }
}
Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303
Diler Launda
  • 1
  • 2
  • You need to use a delegated event handler when attaching event handlers to dynamically created content. See the duplicate for more information – Rory McCrossan Dec 21 '19 at 10:27
  • With the "Paginate using AJAX" option, your DOM content must be updating with XHR, that must be breaking the events you are expecting to keep working. In order to proper address it, it's common place to use [event delegation](https://learn.jquery.com/events/event-delegation/), that means you will attach your events to parent elements (that won't update) and they will keep track of their child's events. – rafaelcastrocouto Dec 21 '19 at 10:27

0 Answers0