0

I am working on a post-comments project. Using AJAX I am generating comments. Each generated comments has Like button. But new generated Like button doesn't work until I refresh the page. The generated link is shown below.

<div class="comment-body-container">
    <div class="comment-body">
        Oye jetha lali
        <a class="like-comment comment-like-color comment_main_id_45" 
            data-like-comment-id="45" href="javascript:;">
                <i class="fa fa-thumbs-up"></i>
        </a>
    </div>
    <div class="liked-this-comment liked_this_comment_45"></div>
</div>

Output after refreshing the page.

<div class="comment-body-container">                                                                          
    <div class="comment-body">
        Oye jetha lali                                                                               
        <a class="like-comment comment-like-color comment_main_id_45" 
            data-like-comment-id="45" href="javascript:;">                                                                                  
            <i class="fa fa-thumbs-up" aria-hidden="true"></i>                                                                               
        </a>                                                                            
    </div>                                                                          
    <div class="liked-this-comment liked_this_comment_45">                                                                                                                                                          
    </div>                                                                       
</div>

Output is almost same. But it doesn't work until I refresh the page. Could some one please provide me the solution for it.

Ashish
  • 647
  • 7
  • 18
  • 1
    Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – peeebeee Jul 06 '18 at 10:11

1 Answers1

1

For dynamic generated content you have to reapply the event after the content is loaded or, better, use event delegation to your likes button, something like that:

$(document).on("click", '.like-comment', function(event) { 
   //do your like stuff here
});

Event delegation works well with dynamic generated content and is the preferred way to handle this specific situation.

GiampaoloGabba
  • 1,428
  • 1
  • 15
  • 21
  • Hi, this question gets asked about 10 times a day - better to just vote close as a duplicate as the duplicate has lots of details: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Jul 06 '18 at 10:28
  • Yep, you are right. I didnt check it before answering, sorry :) – GiampaoloGabba Jul 06 '18 at 10:30
  • It in no way diminishes your valid answer, just adivising that you'll get bored of answering the same question very quickly :) – freedomn-m Jul 06 '18 at 10:31