0

I have this problem, anytime I click on an class ShowLB I want it to appear a LightBox where I create a new element #Content where I load the posts....Once I want it to close the Lightbox I click on the class HideLB to do it, and It does.

JQUERY Initial call to function "show results on Lightbox"

$('.ShowLB').on('click', function() {

  var id_post = $(this).data('id_post');

  //show lightbox, create container
  $(".LightBoxPosts").show();
  $(".Title").after('<ul id=Container></ul>');
  $(document).ShowPosts(id_post);
});

//hide lighbox, remove container
$('.HideLB').on('click', function() {
  $("#Container").remove();
  $(".LightBoxPosts").hide();
});

HTML

<div class="ShowLB" data-id_post="5">[SHOW LIGHTBOX]</div>

<div id="LightBoxPosts">
  <div class="HideLB">[X]</div>
  <div class="Title">[ALL POSTS]</div>
  <div class="ShowMore">[SHOW MORE]</div>
</div>

FUNCTION Once the Lightbox appears the posts loads successfully into #Container

$(".ShowMore").hide();
jQuery.fn.ShowPosts = function(id_post) {

  var loading = false;
  var track_load = 0;
  var total_groups = 5;

  $(".ShowMore").show();
  $(".ShowMore").on('click', function() {


    if (track_load <= (total_groups - 1) && loading == false) {
      alert(track_load);

      $.post("posts.php", {
          'group_no': track_load
        },
        function(data) {
          loading = true;
          $(".Container").append(data);

          track_load++;
          loading = false;

        });
    }    
  });    
}

PROBLEM

At the beginning, When clicking on the .ShowMore button for first time, It retrieves normally the posts. The problem comes out when I click on HideLB to close the lightbox. The container gets removed and anytime I click again ShowLB then .ShowMore the function ShowPosts() loads content from previous calls. It means that the alert track_load appears twice after clicking on the .ShowMore button...and then loads twice new content along with content from the very first time I openned the Lightbox. Does it make sense? I cant continue with this problem.

joe
  • 219
  • 2
  • 11
  • 1
    Everytime you run `ShowPosts ` it binds click handler, so if you bind it twice, it'll execute twice and so on. – Adrian Mar 14 '18 at 13:28
  • 1
    Possible duplicate of [jQuery click events firing multiple times](https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times) – Heretic Monkey Mar 14 '18 at 13:33
  • I'll check it out. thank you – joe Mar 14 '18 at 13:34
  • adding `.off().` to this line `$('.ShowLB').off().on('click', function() {` doesnt solve the problem – joe Mar 14 '18 at 13:38
  • Solved `$(".ShowMore").off() .on('click', function() {`. adding off to `.ShowMore` – joe Mar 14 '18 at 13:51
  • 1
    @joe if you got an answer, write it below and then mark your question as answered. [Also see here](https://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery) for more ways to remove event handlers. – jmbmage Mar 14 '18 at 17:12

0 Answers0