附加到最近的div

时间:2016-12-28 17:05:40

标签: javascript jquery html

如何将数据插入final Button b = ...; final Color[] colors = ...; colors[0] = Color.RED; colors[1] = Color.LIGHT_GREY; ActionListener al = new ActionListener() { int loop = 0; public void actionPerformed(ActionEvent ae) { loop = (loop + 1) % colors.length; b.setBackground(colors[loop]); } } new Timer(200, al).start(); ,以便它不会附加到<div class="reply_form"></div>类的每个实例?

"reply_form"

我目前正在做这个

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

1 个答案:

答案 0 :(得分: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)对象存储在回调之外,因为它内部会有所不同,而是引用Ajax调用的jqXHR对象。

希望这有帮助。