1

我正在使用 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 只是在我的表单上方打开，而不是在每个选项下方。有人可以解释为什么吗？

蒂亚！

4

1 回答 1

4

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允许您设置稍后调用的函数的上下文。这类似于.calland .apply，但它不会立即调用该函数。by 设置的上下文.bind 优先于.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 设置的 DOM 元素作为.click回调的上下文。创建的唯一其他范围是 by function () {}，但您在此范围this之外使用。

$.ajax文档中提供了更多信息

于 2013-06-21T00:29:40.893 回答