How to slide down dynamic content using jQuery?

Question

I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.

This is an example of my setup.

<div class="comment">

 <div class="main-comment">
    Message.

 <a href="#" class="show-replies">Show Replies (1)</a>
 </div>

 <div class="sub-comment">
  Funny comment up there, mate.
 </div>
</div>

But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:

$(".comment").delegate('.show-replies', 'click', function(event) {

 $(this).parent().next(".sub-comment").slideDown();

});

I've tried to make the setup as simple and close to the real thing as possible.

What am I doing wrong and how do I solve it?

You should not be using `delegate` anyway, just `.on` - Is the problem that its not binding to the even? or what is the actual problem? — Piotr Kula, Aug 30 '15 at 17:35
lol I just realised that and edited it before reading this. But please keep in mind this is only an example setup, not a direct copy & paste. I've checked the real thing more thoroughly. — Barry D., Aug 30 '15 at 17:35
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Aug 30 '15 at 17:36
No. That focuses on binding events to dynamically generated parent element. This issue addresses calling functions on a child within a dynamically created element. They're different questions. The answer to the question you posted is actually within my code. — Barry D., Aug 30 '15 at 17:39
The duplicate certainly isn't about "dynamically genrated parent element." It's specifically about a *static* parent with dynamical children. — JJJ, Aug 30 '15 at 17:45
This isn't a static parent, though. It's a dynamic parent with dynamic children. Lol. Anyway, thanks for your help. Bye sir. — Barry D., Aug 30 '15 at 18:08
You always have a static parent somewhere up the DOM tree; if nothing else then the `document` object. — JJJ, Aug 30 '15 at 19:54

score 0 · Answer 1 · answered Aug 30 '15 at 17:39

0

 <div class="comment">

 <div class="main-comment">
    Message.

 <a href="#" class="show-replies">Show Replies (1)</a>
 </div>

 <div class="sub-comment" style="display: none">
  Funny comment up there, mate.
 </div>
</div>

 <script>
  $(document).ready(function() {
    $('.show-replies').on('click', function() {
     $('.sub-comment').slideToggle();
    });
  });
 </script>

answered Aug 30 '15 at 17:39

SuperVeetz

2,128
3
24
37

This wont work.. did you not read he is loading DYNAMIC content. This will not bind to the NEW content...... – Piotr Kula Aug 30 '15 at 17:41
Won't work as stated, it's not the way I do the toggle, its binding the event to the dynamic element, and triggering the slide function in a child within that element. – Barry D. Aug 30 '15 at 18:08

score 0 · Answer 2 · answered Aug 30 '15 at 17:44

In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.

<div class="comments">

   <div class="main-comment">
    Message.<a href="#" class="show-replies">Show Replies (1)</a>
   </div>

   <div class="sub-comment" style="display: none">
    Funny comment up there, mate.
   </div>
</div>

 <script>
  $(document).ready(function() {
    $('.show-replies').on('click','.comments', function() {
     $('.sub-comment').slideToggle();
    });
  });
 </script>

Notice the .on(eventType, selector, function) signature.

This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.

Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.

I'm using a lower version of jQuery for compatibility purposes. (ie7) — Barry D., Aug 30 '15 at 18:12

score 0 · Answer 3 · answered Aug 31 '15 at 17:21

0

Replacing

$(this).parent().next(".sub-comment").slideDown();

with

$(this).parent().parent().next(".sub-comment").slideDown();

Fixed the problem.

answered Aug 31 '15 at 17:21

Barry D.

549
2
6
21

How to slide down dynamic content using jQuery?

3 Answers3