Избегайте дублирования функций в JQuery

Question

Я использую два сценария на моем сайте

1. JQuery/Ajax, чтобы загрузить следующие три сообщения без перезагрузки страницы
2. JQuery открывать каждый пост в iframe/модальный диалог

Проблема: после нажатия «загрузить больше сообщений», а затем щелкнуть по одному из первых 3 сообщений, сообщение открыто дважды.

Мне нужно найти способ удалить функцию superbox() для предыдущего заполнителя и добавить ее снова для нового заполнителя (иначе новые сообщения будут только открываться в обычном окне).

Сайт http://gotoviproekti-och.com

if(pageNum <= max) { 
    // Insert the "More Posts" link. 
    $('.content-middle') 
     .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')    

     .append('<p id="pbd-alp-load-posts"><a href="#">Покажи още готови проекти</a></p>'); 

    $(function(){ 
     $.superbox(); 
     }); 
     //Single Page Carousel 
     $(function() { 
     $(".image").click(function() { 
     var image = $(this).attr("rel"); 
     $('#image').hide(); 
     $('#image').fadeIn('slow'); 
     $('#image').html('<img src="' + image + '"/>'); 
     return false; 
      }); 
     }); 
    } 



/** 
* Load new posts when the link is clicked. 
*/ 
$('#pbd-alp-load-posts a').click(function() { 

    // Are there more posts to load? 
    if(pageNum <= max) { 

     // Show that we're working. 
     $(this).text('Loading...'); 

     $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .pic', 
      function() { 
       // Update page number and nextLink. 
       pageNum++; 
       nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum); 

       // Add a new placeholder, for when user clicks again. 
       $('.content-middle') 
       .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div><div class="clearfloat"></div>') 

       $.superbox.detach(); 

       $.superbox(); 


       // Update the button message. 
       if(pageNum <= max) { 
        $('#pbd-alp-load-posts a').text('Load more posts'); 
      } 
     ); 
    } else { 
     $('#pbd-alp-load-posts a').append('.'); 
    } 

    return false; 
}); 

});

Answer 1

Используйте $.on(), и вам нужно только связать событие один раз.

$('#posts-container').on('click', '.post', doPostEvent);