如何解決這個業餘jQuery /砌體/無限滾動代碼？

Question

我需要幫助來簡化我的AJAX代碼。我是一個完全新手，我確信我的方法是錯誤的，錯誤的，錯誤的。但我不知道如何糾正我的錯誤，並做到正確。

要點：

• 我有拇指所佔的畫廊。
• 我使用jQuery，磚石和無限滾動到像八九不離十Pinterest的顯示出來。
• 在每個縮略圖是隱藏拇指/從庫中刪除它的鏈接。
• 我已經設法與下面的代碼隱藏功能的工作。
• 但我的業餘黑客要求每個拇指有自己的腳本段，如圖所示。

問題：有沒有辦法收緊這件事，使一個單一的代碼片段可以應用到網頁上的所有大拇指？

<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：我注意到，當新的大拇指都被添加/追加到第一批拇指（與無限滾動），上面的隱藏功能不適用於附加的拇指工作 - 只在開始時加載的原始拇指。

我相當肯定，我需要「告訴」 jQuery的是，這些新的大拇指已被添加，但由於上面的代碼是如此foobar'd我不知道如何/從哪裏開始。

我的無限滾動代碼包含在頁面最底部，它看起來像這樣：

//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); 
      } 
      }); 
    }); 

謝謝。

Answer 1

嘗試以下操作：

// 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); 
});