Why is jQuery not working on appended content?

Question

I have a jQuery function that displays a hidden content on each element in the loop of elements. This work perfectly, but the problem is that when I append new elements to the loop it stops working. It actually works on some elements and doesn't work on others (strange behavior).

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $(".see_all").click(function(){

 if ($(this).next().css('display') == 'none'){
 $(this).next().show();

}
else

if($(this).next().is(':visible')){
   $(this).next().hide();
 }

});
})
</script>

Is there a problem with my jQuery code? How can I make it work on both newly appended elements and previously displayed elements.

HTML code

   <div class="center_container">
   <%for users in @user%>
  <div class="see_all">

  <span style="color:#808080;cursor:pointer">See All Reviews(<%=@beep_count=       (@beep.opposes.count +  @beep.neutrals.count + @beep.supports.count)%>)</span>

 </div>

     <div style="display:none;" class="hidden">

      No reviews available 

     </div>
 <%end%>

 </div>

Answer 1

This will only work if you're using jQ 1.7+ . If you're not, take a look at jQuery's delegate method , which will achieve the same thing in jQuery < 1.7. There's no reason not to be using the latest version, though :)

This is because at the time when you bind your click handler:

 $(".see_all").click()

It is bound only to the current elements that match the selector .see_all .

What you can do to get around this is use jQuery's on() to delegate:

$("body").on("click", ".see_all", function() {
  //do stuff
});

This handler is bound to the body , and then when it detects a click it will look to see if the element clicked matches the selector .see_all . If it does, it will then execute the function. Because it's bound to the body , this will work if new .see_all elementsare inserted into the DOM too.

If all .see_all are contained within one div , use that to delegate on rather than body - used that purely as an example. Delegate to the first thing that encompasses all .see_all elements.

As a side note, you should use the new API .on() and .off() for your event binding, since 1.7 they have become the preferred method. Documentation for .on() .

Answer 2

First of all, this can be optimized using toggle. Then, you will need an on() event handler for this, since click is only bound to already existing elements on document ready. When a new element is added, you need a way to dynamically re-bind the click event.

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $("body").on('click', '.see_all', function(){
  $(this).next().toggle();
});
})
</script>