将 Ajax 注释添加到 Ajaxed 状态

Question

我正处于我的提要中 ajaxing 的最后阶段。虽然我认为这可能是评论输入的简单粘贴，但我错了。

我在主要的 ajaxed 状态下插入了我的输入，因此当用户添加状态时，ajaxed 状态会进入他们的提要，然后他们可以单击 ajaxed 状态并编写 ajaxed 评论。用户提交评论后，应使用 ajax 添加评论。但是..页面已刷新，根本没有添加任何评论。

希望我已经理解了我正在“尝试”做的事情。

主要状态 AJAX - 表单的 id 进入一些添加内容的 ajax。

  <script>
    $(document).ready(function(){
    $("form#myform").submit(function(event) {
    event.preventDefault();
    var content = $("#toid").val();
    var newmsg = $("#newmsg").val();

    $.ajax({
    type: "POST",
    url: "insert.php",
    cache: false,
    dataType: "json",
    data: { toid: content, newmsg: newmsg }, 
    success: function(response){ 
     $("#newmsg").val(""); 
    $("#homestatusid").html("ALL MY MAIN STATUS GOES HERE
<div class='stream_comment' id='comment_"+response['comment_id']+"' style='margin-top:0px;'>\
<div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'>\
<div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px>\
<img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>\
    <td valign=top align=left><div class='stream_comment_inputarea'><form id='mycommentform' method='POST'  class='form_statusinput'>\
    <input type='hidden'  name='streamidcontent' id='streamidcontent' value='"+response['streamitem_id']+"'>\
    <input type='input' name='commentingcontents' id='commentingcontents' placeholder='Say something' autocomplete='off'>\
    <input type='submit' id='button' value='Feed'><br/></div></div>");
    }
    });
    return false
    });
    });
    </script>

在上述 ajax 下方的同一页面中评论 AJAX。

<script>
$(document).ready(function(){
    $("form#mycommentform").submit(function(event) {
        event.preventDefault();
        var streamidcontent = $(this).children("#streamidcontent").val();
        var commentingcontents = $(this).children("#commentingcontents").val();

        $.ajax({
            type: "POST",
            url: "comment_add.php",
            cache: false,
            dataType: "json",
            data: { streamidcontent: streamidcontent, commentingcontents: commentingcontents }, 
            success: function(data){  
                $("#comment_list_"+data.comment_streamitem).append('<div class="stream_comment" id="comment_'+data['comment_id']+'" style="margin-top:0px;">\
                <table width=100%><tr><td valign=top width=30px><img class="stream_profileimage" style="border:none;padding:0px;display:inline;" border=\"0\" src=\"imgs/cropped'+data['comment_poster']+'.jpg\" onerror="this.src=\"img/no_profile_img.jpeg\"" width=\"40\" height=\"40\" ></a><td valign=top align=left>\
                <a href="/profile.php?username='+data['username']+'">'+data['first']+' '+ data['middle']+' '+data['last']+'<div style="font-size:10px;">'+data['comment_datetime']+'</div></a>\<div class="commentholder">'+data['comment_content']+'</div><br/>\<div id="commentactivitycontainer"><a style="cursor:pointer;" onClick=\"deletecomment('+data['comment_id']+',comment_'+data['comment_id']+');\">Delete</a><a id="likecontext_'+data['comment_id']+'" style="cursor:pointer;" onClick=\"likestatuscomment('+data['comment_id']+',this.id);\"><div style="width:80px; position:relative;  float:left; left:40px" id="likescommentprint'+data['comment_id']+'">Like</div></a><div style="width:80px; position:relative;  float:left; left:40px" id="likescommentprint'+data['comment_id']+'"></div></form><a id="dislikecontext_'+data['comment_id']+'" style="cursor:pointer;" onClick=\"dislikestatuscomment('+data['comment_id']+',this.id);\"><div style="width:90px; position:relative;top:-0px; float:left; left:200px" id="dislikescommentprint'+data['comment_id']+'">Dislike</div></a><div style="width:90px; position:relative; top:-0px; float:left; left:200px" id="dislikescommentprint'+data['comment_id']+'"></div></form></div></div></table></div></div></div></div></table></div></div>\<div class="stream_comment_holder" style="display:;"></b></div>');
            }
        });
        return false
    });
});
</script>

点击句柄示例

    <?
if (isset($_POST['commentingcontents'])) {
    echo form();
    return;
}
function form() {
  echo '<div class="form">
<form id="mycommentform" method="POST"  class="form_statusinput">
<input type="hidden"  name="streamidcontent" id="streamidcontent" value="'.$streamitem_data['streamitem_id'].'">
<input type="input" name="commentingcontents" id="commentingcontents" placeholder="Say something" autocomplete="off">
<input type="submit" id="button" value="Feed">
</form>
</div>';
}
?>

Answer 1

您在成功函数中添加的表单“mycommentform”不会绑定到任何 javascript 事件。因此，如果您提交它，它不会被 ajaxed 并重新加载整个页面。

当前的 jQuery 版本提供了 .on() 方法来自动存档。

改变一下

$("form#mycommentform").submit(function(event) {

到

$("body").on("submit", "form#mycommentform", function(event) {

在您的 COMMENT AJAX 部分中有一个委托的事件处理程序。

Answer 2

我认为您的 jquery 包含一些语法错误检查错误控制台

我认为您忘记在“return false”语句后添加分号

确保 ajax 请求正常在 ajax 成功函数中放置一个 alert() 框并检查它是否正常