追加到最近的div

如何將數據插入<div class="reply_form"></div>，以便它不會附加到"reply_form"類的每個實例？追加到最近的div

{% for comment in comments %} 

    {{comment.name}} 
    <p>{{comment.text}}</p> 
    <div class = "buttonDisplayForm" data-path={{path("new", {'blog_id' : BlogPost.id})}} data-id= {{comment.id}}> 
     <button type="button" class="btn btn-primary">Reply</button> 
    </div> 
    <div class="reply_form"></div> 

{% endfor %}

我目前做這

$(document).ready(function(){ 
    $(".buttonDisplayForm").on('click', function() { 
     var path = $(this).attr('data-path'); 
     $.ajax({ 
      type: 'POST', 
      cache: false, 
      url: path, 
      success: function(data){ 
       $(".reply_form").empty().append(data); 
      } 
     }); 
    }); 
});

我想和這個附加的形式，在empty()防止通過添加更多的形式按一下按鈕多次，但這也增加了表單字段的每一個reply_form元素。

來源

2016-12-28 jemcaj

您對當前對象$(this)存儲在變量，所以你可以使用裏面它的成功回調裏面請參閱相關reply_form與點擊buttonDisplayForm按鈕：

$(".buttonDisplayForm").on('click', function() { 
    var _this = $(this); 
    ... 

    success: function(data){ 
     $(".reply_form", _this).empty().append(data); 
    }

全碼：

$(document).ready(function(){ 
    $(".buttonDisplayForm").on('click', function() { 
     var path = $(this).attr('data-path'); 
     var _this = $(this); 

     $.ajax({ 
      type: 'POST', 
      cache: false, 
      url: path, 
      success: function(data){ 
       $(".reply_form", _this).empty().append(data); 
      } 
     }); 
    }); 
});

注：我們存儲$(this)對象進行回調，因爲它的Wi在它內部會有所不同，而是指的是Ajax調用的jqXHR對象。

希望這會有所幫助。

來源

2016-12-28 17:07:31

工作，謝謝。爲什麼$（this）不能在ajax成功內部工作？我想使用'$（this）'，但我不明白爲什麼它不起作用。 – jemcaj

由於在回調中，'this'引用了Ajax調用的jqXHR對象，而不是事件處理程序綁定的元素。不客氣，很高興我能幫上忙。快樂的編碼。 –

我在OP中編輯了HTML。問題是，如果'

'在'buttonDisplayForm' div內，那麼當我點擊表單的文本字段時，它會觸發JS，我希望它在點擊回覆按鈕後才被觸發。現在'reply_form'不在'this'裏面，所以我嘗試使用'nearest（「。reply_form」）'但這不起作用。有任何想法嗎？謝謝 – jemcaj

追加到最近的div

回答

相關問題