How to Fix this Amateurish jQuery / Masonry / Infinite Scroll code?

Question

I need help to simplify my AJAX code. I am a total novice, and I'm convinced my approach is wrong, wrong, wrong. But I'm not sure how to correct my errors and do it properly.

Key Points:

• I have a gallery of thumbs.
• I'm using jQuery, Masonry, and Infinite Scroll to display them sorta like Pinterest.
• Under each thumbnail is a link to hide the thumb/remove it from the gallery.
• I have managed to make the hide function work with the code below.
• But my amateurish hack requires EACH thumb to have its own script snippet as shown.

QUESTION: Is there a way to tighten this up so that one single code snippet could apply to ALL the thumbs on the page?

<div id="gallery-wrapper">

    <div class="thumb" id="thumb_75">
        <img src="/thumbs/thumb_75.jpg" alt="Thumb 75"> 
        <a href="/url/to/hide_thumb.php" id="hide_75">Delete</a>
    </div>
        <script>
            $('#hide_75').click(function(e){e.preventDefault();
            $.post($(this).attr("href"));
            $('#thumb_75').hide(500);
            });                    
        </script>

</div>

ALSO: I've noticed that when new thumbs are added/appended to the first batch of thumbs (with Infinite Scroll) that the above hide function does not work for the appended thumbs -- only the original thumbs that were loaded at the beginning.

I'm fairly certain I need to "tell" jQuery that these new thumbs have been added, but since the code above is so foobar'd I'm not sure how/where to start.

My Infinite Scroll code is included at the very bottom of the page, and it looks like this:

//Infinite scroll
$wall.infinitescroll({
    navSelector  : 'div.pagination', 
    nextSelector : 'div.pagination a.more',
    itemSelector : '.thumb',
    loading: {
        msgText: "Loading more thumbs...",
        finishedMsg: "That's all folks.",
        img: "/graphics/loading.gif"
    },
    animate      : true, 
    extraScrollPx: 150,
    debug: true,
            errorCallback: function() {
            $('#infscr-loading').animate({opacity: 0},2500);
            }
            },

            function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
            ///// PRETTY SURE I NEED TO DO SOMETHING HERE TO INFORM jQUERY OF THE NEW ITEMS
            $newElems.animate({ opacity: 1 });
            $wall.masonry( 'appended', $newElems, true );
            }
            });
    }); 

Thank you.

Answer 1

Try the following:

// add a listener on the gallery-wrapper. All clicks on links inside the 
// wrapper will be caught here. This way, new thumbs which are added later
// are also covered, because you aren't listining on every child but on 
// one static container.
$('#gallery-wrapper').on('click', 'a', function (e) {
    // prevent default action
    e.preventDefault();

    // get the current scope, this is the 'a'-element
    var $this = $(this);

    // post to the url
    $.post($this.attr('href'));

    // find container of current thumbnail and hide
    $this.closest('.thumb').hide(500);
});