通过ajax动态添加内容后Javascript功能不起作用

Question

我有一个函数

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

和Ajax函数

<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>

以及ajax调用后添加的内容

...
...
 <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;">
...
...

所以基本上javascript函数切换div并且它在页面刷新时工作得很好但是当通过ajax成功调用添加时javascript切换不起作用。它会在我刷新页面后工作.

无论如何要解决这个问题，所以当通过 ajax 添加内容而不刷新时切换工作。

谢谢。

Answer 1

更改 ajax 调用后添加的内容如下：

<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> 

并编写如下的jquery代码

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