在基于ajax请求的无线电选项之后附加div

Question

我正在使用jquery发出ajax请求，以确定在单击特定单选按钮时是否应该打开div。我希望打开的div直接显示在所选的单选按钮下。我有以下似乎很有效：

<script language="javascript">
$(document).ready(function(){
    $(".option_select").click(function() {
        $(this).next().after($('#show_pop'));
        $.ajax({
          dataType: 'jsonp',
          url: "/jrequest",
          data: {
            Action: "Do", 
            Option: po,               
          },              
          success: function (response) {                    
            if (response['SomeResponse']) {
                $('#show_pop').slideDown("slow");
            } else {
                $('#show_pop').hide();
            }                       
          },    
          error: function (xmlhttp) {
                console.log(xmlhttp);                   
          }
        });                     
    } 
    }); 
});
</script>

<input type="radio" name="Option1" class="option_select" value="Option1" /> Option 1
<input type="radio" name="Option2" class="option_select" value="Option2" /> Option 2
<input type="radio" name="Option3" class="option_select" value="Option3" /> Option 3

我不明白为什么我不能把“后”作为ajax“成功”的一部分？例如，如果我移动线

$(this).next().after($('#show_pop'));

到这里：

....
  success: function (response) {                    
    if (response['SomeResponse']) {
        $(this).next().after($('#show_pop')); // This line does not seem to work here
        $('#show_pop').slideDown("slow");
    } else {
        $('#show_pop').hide();
    }                       
 },
....     

然后我的div只是在我的表单上面打开，而不是在每个选项下面。有人可以解释原因吗？

TIA！

Answer 1

成功回调中的

this不是jQuery对象，而是调用中使用的ajax设置（$.ajaxSettings与此$.ajax的调用合并。）

有多种解决方案：

重新分配this

与其他语言一样，JS允许您重新分配this变量，该变量具有特殊含义，具体取决于范围。其他变量名称可能没有这样的限制，可以在较低的范围内自由使用。

$(".option_select").click(function() {
    var $this = $(this);
    /* snip */
        success: function () {
            $this.next();
        }

使用Function.bind或$.proxy

Function.bind允许您设置稍后调用的函数的上下文。这类似于.call和.apply，但它不会立即调用该函数。由.bind takes precedence over one set by .call/.apply设置的上下文，因此可以与ajax回调一起使用（我假设稍后使用.call，但我还没有验证这一点。）

jQuery有一个方法$.proxy可以执行相同的操作，但与Function.bind不可用的浏览器兼容。它的工作方式略有不同，它是一个jQuery方法，而不是Function方法，但在这种情况下并不重要。

success: function () { /* your code */ }.bind(this)
success: $.proxy(function () { /* your code */ }, this)

两种方法都返回一个函数。

我个人认为这是最正确的解决方案，尽管它们的工作方式基本相同。

使用$.ajax context

您通常可以使用$.ajaxSettings进行设置，但在这种情况下可能没有意义。此设置为$.ajax的所有回调设置上下文。

$.ajax({
    context: this,

在上面的示例中使用this。

请注意，$.ajax({声明不会创建自己的范围。因此可以安全地做到：

$(".option_select").on("click", function () {
    $.ajax({success: function () {}.bind(this)});
});

上面，this仍然是jQuery设置为.click回调的上下文的DOM元素。创建的唯一其他范围是function () {}，但您可以使用this。

More information is available on the $.ajax documentation