Can't make jQuery callbacks to work properly while calling same function repeatedly

Question

I have a simple share button aside every post, I'm using .toggle() function to show and hide the options. The code looks something like this:

<div id="posts">
<div class="post">
<div class="content">
Post content
</div>
<div class="share">
  <div class="trigger"> Share </div>
  <div class="hidden"> Share on Facebook </div>
  <div class="hidden"> Share on Twitter </div>
</div>
</div><!-- each post -->
<div id="new">
</div><!-- new post container -->
</div><!-- Posts -->

<script>    
    function shareThis(){
        $('.trigger').click(function(){
            $(this).siblings().toggle();
        });
    }    
    $(document).ready(function(){
        shareThis();
        $('#new').load("/post2", function(){
            shareThis();
        });
    });
</script>

I call this function once when the page loads, and then every time a new post is loaded.

The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded. I also tried this with 'each' function but same result.

So it's just working for the last call, similar to these question i found here and here, and some others, but didn't get a solution for my problem there.

Thanks!

PSL · Accepted Answer · 2013-12-25T18:32:23.970

1

The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded.

Your issue could be that you are binding the event twice (or as many number of times you load #new contents) to the existing .trigger by calling shareThis inside the load callback. So basically when you click on the old .trigger it will trigger the handler twice, i.e toggling it twice which keeps them in the same state. SO either bind the event to the newly added ones alone or turn the click event off and turn it on in the function shareThis:

 function shareThis(){
        $('.trigger').off('click').on('click', function(){
            $(this).siblings().toggle();
        });
    }

You could also try:

function shareThis(ctx){
    ctx = ctx || document;
    $('.trigger', ctx).click(function(){
        $(this).siblings().toggle();
    });
}    
$(document).ready(function(){
    shareThis();
    $('#new').load("/post2", function(){
        shareThis(this);
    });
});

edited Dec 25 '13 at 18:32

answered Dec 25 '13 at 18:22

PSL

123,204
21
253
243

I understand and agree with you, I also have same kind of problem with some other functions. Please share if you find a possible solution. Thank you. :) – Person Dec 25 '13 at 18:27
@ialok I have added the solution. By the way where is the element `#new` in your html? and how many times do you load contents to it? – PSL Dec 25 '13 at 18:27
Wait, I'll try this. Sorry I'll edit the question, it's sibling to the div (.post) and after every (.post). I have to load it multiple times. – Person Dec 25 '13 at 18:34
@ialok You could use event delegation as well as the other answer, but do not bind it to the document instead bind it to the parent element that exists in DOM as long as you need the event... But my point was more trying to show what your issue was. But you _dont_ need event delegation here since you are loading the new html just right next line – PSL Dec 25 '13 at 18:38
Just tried your first solution, and everything works well now. The other function too, which was a simple image rotator. Still learning and testing everything you wrote. Thank you so much, and happy holidays! :) – Person Dec 25 '13 at 18:43

score 1 · Answer 2 · answered Dec 25 '13 at 18:35

1

Try binding the click to the document instead. Only need to do it once :)

$(document).on('click', '.trigger', function () {
    $(this).siblings().toggle();
}).ready(function () {
    $('#new').load("/post2");
});

http://api.jquery.com/on/

http://training.bocoup.com/screencasts/more-efficient-event-handlers/

answered Dec 25 '13 at 18:35

TomFuertes

7,150
5
35
49

I can't(also don't know how to) use this solution 'cause I'm also using other functions besides just this function i mentioned, so i need to call all of them when document is ready. PSL's answer worked for my condition. Thank you for help. Happy holidays! :) – Person Dec 25 '13 at 19:05
Your solution also works well for me when i have to use just that one function. – Person Dec 25 '13 at 19:15

Can't make jQuery callbacks to work properly while calling same function repeatedly

2 Answers2