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);
});

通过ajax动态添加内容后，Javascript函数无法正常工作

1 个答案: