CODEWITHSUNDEEP
jquerylaraveljquery-paginationlaravel-pagination
Hixx
Hixx

Reputation: 31

Laravel pagination with jquery read multiple click

I'm trying to use Laravel pagination with jQuery. At first when I click to another page, it will be fine. However, when I click again to another page the number of click events is multiplied. It keeps increasing when I click again and again.

$(document).on('click', '.pagination a', function(event) {
  console.log(event);
  event.preventDefault();

  $('li').removeClass('active');
  $(this).parent('li').addClass('active');

  var page = $(this).attr('href').split('page=')[1];
  fetch_data(page);
});

function fetch_data(page) {
  $.ajax({
    url: "/get_rows?page=" + page,
    success: function(data) {
      $('#table_rows').empty().html(data);
    }
  });
}

Console output:

enter image description here

Upvotes: 1

Views: 775

Answers (1)

Thibaut
Thibaut

Reputation: 343

A workeround could be to do it like this:

$('.pagination a').unbind().on('click', function(event) {
  console.log(event);
  event.preventDefault();

  $('li').removeClass('active');
  $(this).parent('li').addClass('active');

  var page = $(this).attr('href').split('page=')[1];
  fetch_data(page);
});

function fetch_data(page) {
  $.ajax({
    url: "/get_rows?page=" + page,
    success: function(data) {
      $('#table_rows').empty().html(data);
    }
  });
}

EDIT: it seems that unbind() is deprecated, you can do the same with off()

Upvotes: 0

Related Questions