Laravel结合jQuery实现分页时点击事件多次触发问题求解

该异常的核心是分页点击事件被重复绑定了多次，每多执行一次绑定逻辑，点击页码时就会多触发一次回调，最终呈现出触发次数随点击次数成倍增长的现象。

• 分页点击事件的绑定代码被放在了fetch_data的success回调、或者其他每次分页请求完成后都会执行的代码块中，每次请求分页数据就会给document新增一次相同的事件监听
• 页面局部刷新后重复执行了事件绑定逻辑，且没有清理旧的事件监听

两种修复方案按需选择即可：

方案1：调整事件绑定的执行时机 #

将事件绑定逻辑放在页面初始化阶段仅执行1次，不要放在任何会被重复调用的函数中：

// DOM加载完成后仅执行一次绑定
$(function() {
  $(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);
    }
  });
}

方案2：绑定前先清理旧的事件监听 #

如果业务需要动态绑定事件，可在绑定前先用off()方法清理同一事件的已有监听，避免重复绑定：

// 先移除同类型、同选择器的已有事件，再绑定新事件
$(document).off('click', '.pagination a').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);
    }
  });
}

如果分页DOM不随表格数据变化，不要将分页代码放在/get_rows接口返回的内容中，避免重复渲染分页组件，也能减少同类异常的发生概率。

内容的提问来源于stack exchange，提问作者Hixx