Javascript function doesn't work after adding content dynamically through ajax

Question

I have a function

function reply(id) {
        $('#reply_'+id).toggle();
        return false;
    }

And Ajax function

<script type="text/javascript">
function post()
{
  var comment = document.getElementById("comment").value;
  var course_id = document.getElementById("course_id").value;
  var user_id = document.getElementById("user_id").value;
  if(comment)
  {
    $.ajax
    ({
      type: 'post',
      url: 'comments.php',
      data: 
      {
         comment:comment,
         course_id:course_id,
         user_id:user_id
      },
      success: function (response) 
      {
        document.getElementById("comment-list").innerHTML=response+document.getElementById("comment-list").innerHTML;
        document.getElementById("comment").value="";

      }
    });
  }

  return false;
}
</script>

And the content that is added after ajax call

...
...
 <p class="text-right"><a href="#" onclick="return reply(<?php echo $i; ?>);" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>    
...
...
<div class="row" id="reply_<?php echo $i; ?>" style="display: none;">
...
...

So basically that javascript functions toggle the div and it is working perfectly fine on page refresh but when adding through ajax success call the javascript toggle doesn't work. It will work after I refresh the page.

Anyway to fix this so toggle work when content added through ajax without refresh.

Thanks.

they are. As I said. it works when page refresh but doesnt when added through ajax — Phoenix
– Phoenix, Commented Mar 9, 2017 at 5:29

Yasin Patel · Accepted Answer · 2017-03-09 05:33:35Z

1

Change your content that is added after ajax call as below:

<p class="text-right">
<a href="#" data-id="<?php echo $i; ?>" class="btn btn-default btn-sm btnReply">
<i class="fa fa-reply"></i> reply</a></p>

and write jquery code as below

$("body").on("click", ".btnReply", function(event){
   var id =$(this).attr('data-id');
   reply(id);
});

answered Mar 9, 2017 at 5:33

Yasin Patel

5,7818 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Phoenix Over a year ago

Ok toggle works but the problem is now when I click button it goes to top of page and I have to scroll down to see. Earlier the page stayed where it was.

Phoenix Over a year ago

<script type="text/javascript"> $("body").on("click", ".btnReply", function(event){    var id =$(this).attr('data-id');    reply(id); }); 	function reply(id) { 		$('#reply_'+id).toggle(); 		return false; 	} </script>

Phoenix Over a year ago

<p class="text-right"><a href="#" data-id="<?php echo $i; ?>" class="btn btn-default btn-sm btnReply"><i class="fa fa-reply"></i> reply</a></p>

Yasin Patel Over a year ago

<p class="text-right"> <button data-id="<?php echo $i; ?>" class="btn btn-default btn-sm btnReply"> <i class="fa fa-reply"></i> reply </button> </p>

Yasin Patel Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Javascript function doesn't work after adding content dynamically through ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related