javascript - 追加到最近的 div

Question

如何将数据插入 <div class="reply_form"></div>所以它不会附加到 "reply_form" 的每个实例类(class) ？

{% 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 添加表单字段元素。

Answer 1

您必须将当前对象 $(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) 对象存储在回调之外，因为它在回调中会有所不同并引用 jqXHR Ajax 调用的对象。

希望这对您有所帮助。