Question

我在页面和模态窗口中有一个分页（模态内容加载了ajax）。如何正确编写选择器？模态中的Href触发两次，非模态零。

＆＃13;

$('body').on('click', ':not(.modal-content) .pagination a', function(e) {
    console.log('standart pagination'); // fires none
});

$('body').on('click', '.modal-content .pagination a', function(e) {
    console.log('modal pagination'); // fires from both
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
   <a href="#">page 1</a>
</div>
<div class="modal-example">
   <div class="modal-content">
      <div>
          <div class="pagination">
             <a href="#">page 1 modal</a>
          </div>
      </div>
   </div>
</div>

＆＃13;

尝试一下： https://www.bootply.com/q7B3mr1OWQ

谢谢你的帮助

最后，我使用了这个解决方案：

$('body').on('click', '.pagination a', function(e) {
  if($(this).parents('.modal-content').length !== 0) {
    return;
  }

    console.log('standart pagination'); // fires from both
});

$('body').on('click', '.modal-content .pagination a', function(e) {
    console.log('modal pagination'); // fires from both
});

Answer 1

这不起作用，因为你说找到任何不是.modal-content的元素然后在其中找到分页链接。你找到了两个可能的问题：

如果分页元素直接在正文中，则没有父元素可以检查是否有.modal-content。这就是标准链接没有做任何事情的原因。
对于.modal-content内的链接，如果有任何其他父元素，它将触发标准处理程序。这就是为什么你得到第二个链接的两个消息。

我认为你不能通过使用选择器获得正确的链接组来应用事件处理程序，除非你向分页链接本身添加一个类来识别它们是否是模态的。

有很多方法可以解决这个问题。您可以获取所有分页链接，然后过滤它们以获取具有.modal-content父级和没有父级的链接，并将相关事件处理程序附加到它们：

var paginationLinks = $('.pagination a');

paginationLinks.filter(function() {
  return $(this).parents('.modal-content').length === 0;
}).on('click', function(e) {
    console.log('standard pagination');
});

paginationLinks.filter(function() {
  return $(this).parents('.modal-content').length > 0;
}).on('click', function(e) {
    console.log('modal pagination');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
   <a href="#">page 1</a>
</div>
<div class="modal-example">
   <div class="modal-content">
      <div>
          <div class="pagination">
             <a href="#">page 1 modal</a>
          </div>
      </div>
   </div>
</div>

另一种选择是检查元素是否在事件处理程序中的模态内容中：

$('body').on('click', '.pagination a', function(e) {
    if($(this).parents('.modal-content').length === 0) {
      console.log('standard pagination');
    } else {
      console.log('modal pagination');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
   <a href="#">page 1</a>
</div>
<div class="modal-example">
   <div class="modal-content">
      <div>
          <div class="pagination">
             <a href="#">page 1 modal</a>
          </div>
      </div>
   </div>
</div>

用于标准和模态内容的Laravel分页的jQuery选择器

1 个答案: