无限滚动中的 jQuery 委托元素-解网

问：

我正在使用这个“简单”代码为容器 div 分配一个 pin id，然后单击以打开 .pin-card 内容。

这工作正常，但是当我添加无限滚动脚本时，此代码不适用于加载的新元素。

$(document).on("click", ".showImage", function() {
    $('.pin-card').not('#pin' + $(this).attr('target')).hide();    
    $('#pin' + $(this).attr('target')).toggle();
});

由于延迟的发明 .showImage 而只能打开作品

$(document).on("click", ".showImage", function() {

其余的不起作用：

 $('.pin-card').not('#pin' + $(this).attr('target')).hide();    
    $('#pin' + $(this).attr('target')).toggle();

这是html代码：

<div class="masonry-item">
    <a class="showImage" target="28">
        <img src="">
    </a>
         <!-- open div -->
         <div id="pin28" class="pin-card" style="display: none;">
            <div class="close"><i class="fa-solid fa-arrow-left"></i></div>
          </div>
          <!-- end open div -->
</div>

这一切都很简单，但我很难让它工作。

有什么想法吗？

编辑代码示例：https://jsfiddle.net/dlopezros/dw2snxtp/20/ 或运行中：https://shop.midimal.es/collections/string-inspiracion

jQuery 无限滚动

生成所提供代码的简单代码片段/jsfiddle 表明您的代码（如所提供）工作正常。所以问题一定出在插件上。也许它没有生成您期望的 HTML？请编辑您的问题并附上一个工作片段，其中包括无限滚动以及您如何使用它。请参阅最小可重现示例。因此，我们可以看到在提供的详细信息之外出了什么问题。最简单的选择是调试输出（网络选项卡/检查元素）infinite-scroll

0赞 freedomn-m 10/26/2023

更新：您链接的特定无限滚动具有商业许可证 - 您应该联系您的供应商寻求支持。

0赞 Dlopezros 10/27/2023

嗨，@freedomn-m 您可以在 jsfiddle.net/dlopezros/dw2snxtp/20 或操作中查看代码示例： shop.midimal.es/collections/string-inspiracion

0赞 Dlopezros 10/27/2023

@freedomn-m 问题不是由无限滚动引起的。问题源于我的点击事件代码

0赞 freedomn-m 10/27/2023

每次 infinit-scroll 加载新数据时，加载的数据都会从 pin0 重新开始。因此，在一两页之后，您有多个具有相同 .您可以通过打开页面（不要滚动）打开控制台并输入（==0） - 然后滚动到底部以启动分页并再次输入（>0）来确认这一点。ID 必须是唯一的。因此，当您单击第 5 个时，您将获得第一个 .添加到 showImage 点击事件 - 每增加一个页面，该事件必须始终增加，而不是重置。id='pin0'$("[id=pin0]").lengthtarget=0id=pin0console.log($(this).attr('target'))

答： 暂无答案

上一个：Rick and Morty React + TypeScript + Redux App - 为什么过滤不起作用？

下一个：AG-Grid：在排序和过滤后分配连续的行号，Excel 样式

无限滚动中的 jQuery 委托元素

jquery delegate elements in infinite scroll

评论