0

そのため、動的に挿入されたコメントフォームがあり、フォームを送信した後、サーバーでそれをajaxし、コメントセクションにコメントを追加しますが、追加部分が機能しません。これは私が持っているものです：

$(".action-link-comment").click(function() {
  if ($(this).parent().parent().find('.comment-form')[0]){
    return false;
  }
  $(this).parent().parent().append('<div class="comment-form"><form class="comment-input"><input class="input-xlarge comment-val" type="text" placeholder="Write a comment..." style="height:14px;"/><input type="submit" style="position:absolute;left:-9999px;width:1px;height:1px;"/></form></div>');
  $(".comment-input").submit(function(event) {
    event.preventDefault();
    var comment = $(this).find('.comment-val').val();
    var post_id = $(this).parent().parent().find('.post-id').html();
    $.ajax({
      url:'/comment',
      type: 'POST',
      dataType: 'json',
      data : {'p' : post_id,
        'data' : comment},
        success: function(response, textStatus, jqXHR) {
          $(this).parent().parent().siblings('.comments-container').append('<div class="comment"><label class="hover><a href="/user/' + response.userid + '"><strong>' + response.name + '</strong><' + '/a><' + '/label><span class="displaynone comment-id">' + response.comment_id + '</span><span class="comment-content">' + response.data + '</span><div class="comment-actions"><a href="javascript:void(0)" class="c-action"><i class="icon-thumbs-up"></i>Like</a><a href="javascript:void(0)" class="c-action"><i class="icon-thumbs-down"></i>Dislike</a><a href="javascript:void(0)" class="c-action reply"><i class="icon-pencil"></i>Reply</a></div>');
        },
    });

  });
});

そしてHTMLの場合：

<div class="post-container">
    ...
    <div class="post-actions">
        <span class="p-action comment">
            <a class="action-link-comment" href="javascript:void(0)">Comment</a>
        </span>
    </div>
</div>
4

2 に答える 2

4

関数thisのコンテキストでは、目的のオブジェクトを参照していないため、オブジェクトをキャッシュする必要があります。successthis

$(".action-link-comment").click(function() {
         var $this = $(this);       
         //....  
         success: function(response, textStatus, jqXHR) {
              $this.parent().parent()
         // ...
});
于 2012-08-22T01:22:42.067 に答える
4

this内部で使用する場合は、を参照しsuccessません.comment-input。ajax呼び出しを行う前に参照を保存します。

$(".action-link-comment").click(function() {
    var self = this;
    // ...
    $.ajax({
     // ...
     success: function(response, textStatus, jqXHR) {
       $(self).parent().parent()...
     }
    });
});
于 2012-08-22T01:22:51.923 に答える