jQuery没有附加注释

因此，这个jQuery是要提交一个关于我正在工作的社交网站状态的评论

我的问题基本上是简单明了的。我无法让jQuery附加到最近的div。它不会附加到最近的

。status comment

是封装注释的div

正如你所看到的，我有一个警报，当我发表评论时会显示“hi”。。所以我知道它在脚本中有那么远，它只是不会附加。我不知道为什么。 我的朋友们，任何帮助都将不胜感激

    $(".add-comment").bind("submit", function() { 
 var comment = $(this).closest(".commentInput").attr('value'); 
 if(comment != ""){ 
  $.ajax({ 
   type : "POST", 
   dataType : "json", 
   cache : false, 
   url : "/ajax/add-comment.php", 
   data : $(this).serializeArray(), 
   success : function(result) { 
    if(result.result == "success"){ 
    alert("hi");
      $(this).closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>"+comment+"</span></p><hr>");
      $("#comment").val("");         
    }else{ 
     alert("Well it looks like you failed");
    } 
   }, 
   error : function() { 
    alert("An error occurred, please try again later."); 
   } 
  }); 
 }else{ 
  alert("You should probably write a comment before posting it");
 } 
 return false;
});

---

问题在于ajax成功处理程序中的关键字

this

没有引用

addcomment

元素，您可以使用如下所示的闭包变量

$(".add-comment").bind("submit", function () {
    var $this = $(this);
    //use val() to get the value, also you may have to use `$this.find(".commentInput").val()`
    var comment = $.trim($this.closest(".commentInput").val());
    if (comment != "") {
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: "/ajax/add-comment.php",
            data: $(this).serializeArray(),
            success: function (result) {
                if (result.result == "success") {
                    alert("hi");
                    //this here does not refer the `add-comment` element, use a closure variable
                    $this.closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");
                    $("#comment").val("");
                } else {
                    alert("Well it looks like you failed");
                }
            },
            error: function () {
                alert("An error occurred, please try again later.");
            }
        });
    } else {
        alert("You should probably write a comment before posting it");
    }
    return false;
});

---

请分享你的html，因为你可能也想

trim

为shitespaces添加你的值，比如

if（$.trim（comment））{//有注释并且不是空白

是的..它没有附加。所以我尝试了你的建议，使用

$this.find（.commentInput”）.val（）

但这仍然不起作用。我将发布我的markup@JasonBassett因此，由于

commentInput

是

addcomment

的子级，因此需要使用

$this.find（“.commentInput”）.val（）

…@JasonBassett标记中的

状态注释

元素在哪里…您能否共享生成的html，该html显示添加注释和状态之间的关系-comment@JasonBassett您确定调用了ajax成功回调吗？您还可以检查浏览器中的html以确保关系正确吗让我们

echo '<div class="status-container">';
    foreach($status as $aStatus){
        echo '<div id="post_id_'.$aStatus['status']['id'].'" class="panel panel-default status post-box">';
        echo '<div class="panel-heading">
        <img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aStatus['user']['photo'].'"/> <h6><a href="/profile?id='.$aStatus['user']['id'].'">'.$aStatus['user']['first'].' '.$aStatus['user']['last'].'</a></h6></div>';
        echo '<div class="panel-body">';
        echo '<p>'.$aStatus['status']['status'].'</p>';
        echo '<p><a><i class="glyphicon glyphicon-thumbs-up"></i> Like</a> · <a style="cursor:pointer;" class="status-comment-link"><i class="glyphicon glyphicon-comment"></i> Comment</a> - <abbr style="font-weight:bold; border-bottom:none;" title="'.date("l, F jS, Y g:i:s A",$aStatus['status']['post_time']."").'">about '.ago($aStatus['status']['post_time']."").'</abbr></p>';
        echo '</div>';
        echo '<div class="panel-footer">';
        echo '<div class="status-comment">';

echo '<div class="status-comment">';

    $comment = $account->get_comments($aStatus['status']['id']);
    if(!isset($comment['error'])){
        foreach($comment as $aComment){
            echo'

        <p><a href="/profile?id='.$aComment['user']['id'].'"><img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aComment['user']['photo'].'"/></a> <span><strong>'.$aComment['user']['first'].' '.$aComment['user']['last'].'</strong></span></p>
        <p><span>'.$aComment['comment']['comment'].'</span></p>
        <hr>';
        }
    }

echo    '
        </div>
        <!-- comment box -->
        <form class="add-comment" method="post">
        <img class="comment-thumbnail" src="/userphotos/'.$acct['photo'].'"/> <span><input type="text" name="comment" class="form-control commentInput" placeholder="Comment" autocomplete=off>
        <input type="hidden" name="pid" value="'.$aStatus['status']['id'].'">
        </form></span></div>
        <!-- end comment box -->';

        echo '</div>';

$(".add-comment").bind("submit", function () {
    var $this = $(this);
    //use val() to get the value, also you may have to use `$this.find(".commentInput").val()`
    var comment = $.trim($this.closest(".commentInput").val());
    if (comment != "") {
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: "/ajax/add-comment.php",
            data: $(this).serializeArray(),
            success: function (result) {
                if (result.result == "success") {
                    alert("hi");
                    //this here does not refer the `add-comment` element, use a closure variable
                    $this.closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");
                    $("#comment").val("");
                } else {
                    alert("Well it looks like you failed");
                }
            },
            error: function () {
                alert("An error occurred, please try again later.");
            }
        });
    } else {
        alert("You should probably write a comment before posting it");
    }
    return false;
});

$this.closest('.panel').find('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");