Laravel分页jQuery选择器问题：页面与AJAX模态框分页点击异常

你的问题出在选择器的逻辑错误上：

• 第一个选择器 :not(.modal-content) .pagination a 的实际作用是匹配所有在非.modal-content元素下的分页链接，但body本身就是非.modal-content元素，所以模态框内的分页链接也会被这个选择器匹配到（因为模态框在body里）。这就导致模态框内的点击会同时触发两个事件处理函数。
• 至于页面中的分页完全不触发，大概率是因为你的页面分页的DOM结构里，.pagination的父元素层级问题，导致原选择器没有正确匹配到目标元素。

下面是两种可行的解决方案：

方案一：合并事件处理（推荐） #

把两个事件合并成一个，通过判断点击的链接是否在模态框内来区分逻辑，这样更简洁，还能避免重复绑定：

$('body').on('click', '.pagination a', function(e) {
  e.preventDefault(); // 阻止默认跳转，根据你的需求调整
  const $link = $(this);
  
  // 判断当前链接是否在模态框内
  if ($link.closest('.modal-content').length) {
    console.log('modal pagination');
    // 这里写模态框分页的逻辑
  } else {
    console.log('standart pagination');
    // 这里写页面分页的逻辑
  }
});

方案二：修正选择器，精准区分 #

如果你一定要分开写两个事件处理函数，可以用更精准的选择器排除模态框内的元素：

// 页面分页：只匹配不在.modal-content内的分页链接
$('body').on('click', '.pagination a:not(.modal-content .pagination a)', function(e) {
  e.preventDefault();
  console.log('standart pagination');
});

// 模态框分页：只匹配.modal-content内的分页链接
$('body').on('click', '.modal-content .pagination a', function(e) {
  e.preventDefault();
  console.log('modal pagination');
});

或者也可以在事件处理函数里通过closest判断容器，确保逻辑准确：

// 页面分页
$('body').on('click', '.pagination a', function(e) {
  // 如果当前链接不在.modal-content内，执行页面分页逻辑
  if (!$(this).closest('.modal-content').length) {
    e.preventDefault();
    console.log('standart pagination');
  }
});

// 模态框分页
$('body').on('click', '.modal-content .pagination a', function(e) {
  e.preventDefault();
  console.log('modal pagination');
});

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