javascript - 在 JQuery 函数中选择一个元素

Question

我正在使用 JQuery 和 AJAX 提交和处理表单。用户提交表单后，处理表单（使用成功函数）中的 html 应附加到当前输入。但是不断发生的事情是，html 被附加到页面上的所有输入中，而不仅仅是被选中的那个。

我的代码：

    $(".comment-form").submit(function() {

        var dataString = $(this).serialize();
        $.ajax({  
            type: "POST",  
            url: "comment.php",  
            data: dataString,
            success: function(html) {
                $(".comment-input-wrap").append(html);  <-- The code in question
            }
        }); 

        $(this).find('.comment-input').val("");

        return false; 

    });

我尝试使用：

$(this).parent().append(html);

但我认为问题在于我不能使用 $(this) 因为它超出了函数的范围。我能做些什么？

谢谢！

Answer 1

Simplest approach would be to cache the element before ajax call and access it inside the callback.

You can do this way:

$(".comment-form").submit(function() {

    var dataString = $(this).serialize();
    var $this = $(this); //Cache it here
    $.ajax({  
        type: "POST",  
        url: "comment.php",  
        data: dataString,
        success: function(html) {
            $this.parent().append(html); //access the variable
        }
    }); 

    $(this).find('.comment-input').val("");

    return false; 

});

Or use context property of ajax.

 $.ajax({  
            type: "POST",  
            url: "comment.php",  
            data: dataString,
            context: this, //Set the context for callback
            success: function(html) {
                $(this).parent().append(html); //access it using the context itself.
            }
        }); 

or you can also use $.proxy

     $.ajax({  
            type: "POST",  
            url: "comment.php",  
            data: dataString,

            success: $.proxy(function(html) {
                $(this).parent().append(html); //access it using the context itself.
            }, this); // Set the context
        }); 

or using ecmascript5 function.prototype.bind

   $.ajax({  
            type: "POST",  
            url: "comment.php",  
            data: dataString,

            success: (function(html) {
                $(this).parent().append(html); //access it using the context itself.
            }).bind(this); // Set the context
        }); 

Answer 2

您可以简单地存储$(this)在一个变量中：

{
    var $this = $(this);
    {
         $this.append(html);
    }
}