jquery delegate elements in infinite scroll

by

I’m using this “simple” code to assign a pin id to the container divs and click to open the .pin-card content.

This works fine, but when I add the infinite scroll script, this code does not work for new elements that are loaded.

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

Only open works thanks to the deferred invention .showImage

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

the rest doesn’t work:

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

This is the html code:

<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>

It’s all pretty simple but I’m having a hard time getting it to work.

any ideas?

EDIT an example of the code: https://jsfiddle.net/dlopezros/dw2snxtp/20/
or in operation at: https://shop.midimal.es/collections/string-inspiracion

  • Generating a simple snippet / jsfiddle of the code provided shows that your code, as provided, works fine. So the issue must be around the infinite-scroll plugin. Perhaps it’s not generating the HTML that you’re expecting? Please edit your question and include a working snippet that includes infinite-scroll and how you are using it. See minimal reproducible example. So we can see what’s going wrong outside of the provided details. Easiest option is for you to debug the output (network tab / inspect elements)

    – 




  • Update: the specific infinite-scroll that you’ve linked has a commercial licence – you should contact your supplier for support.

    – 

  • Hi @freedomn-m You can see an example of the code at jsfiddle.net/dlopezros/dw2snxtp/20 or in operation at: shop.midimal.es/collections/string-inspiracion

    – 

  • @freedomn-m the problem is not caused by the infinite-scroll. The problem stems from my click event code

    – 

  • Each time your infinit-scroll loads new data, the loaded data starts again from pin0. So after a page or two, you have multiple entries with the same id='pin0'. You can confirm this by opening the page (don’t scroll) open console and enter $("[id=pin0]").length (==0) – then scroll to bottom so the paging kicks in and enter again (>0). IDs must be unique. So when you click on the 5th target=0 then you get the first id=pin0. Add console.log($(this).attr('target')) to your showImage click event – this must always increase for each additional page rather than reset.

    – 

Leave a Comment