Question

我正在试图弄清楚为什么这不起作用，所以我终于创建了一个关于jsFiddle的简化版本，当然它在那里工作。

我正在做什么 - 将鼠标悬停在元素上并将该响应放入DIV中的简单AJAX调用。这是我网站上的代码无效...

HTML

<div class="profileimage">
   <a href="#">
      <img src="/profilepics/img.jpg" />
      <p>Test Here</p>
   </a>
   <div class="profileInfo"></div>
</div>

的jQuery

$(document).ready(function() {
    $('.profileimage').hover(function() {
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                $(this).find('.profileInfo').html(HTML);
            }
        });
    });
});

另外，作为参考，目前 getProfile.php 中的所有内容都是：

<p>RESULTS FROM AJAX</p>

AJAX请求发生的原因是什么，结果是好的。如果我用alert(HTML)替换成功函数中的行，我可以看到响应。不起作用的是响应永远不会进入profileInfo子元素。

我认为我的定位器不正确，所以我创建了一个jsFiddle（HERE）进行测试。事实证明，定位器工作得很好。

所以我想这里的问题是......如果定位器在jsFiddle中运行正常，但在AJAX请求中没有...那么在AJAX调用中使用它的方式有什么我需要改变的吗？我不明白为什么$(this).find('.profileInfo').html(HTML);不能正常工作，无论我是否在AJAX响应中使用它。

任何想法/建议都表示赞赏......

Answer 1

this不是正确的背景。要解决此问题，您有多种选择：

您可以使用context选项：

$.ajax({
    url:"getProfile.php",
    context: this,
    success:function(HTML){
        $(this).find('.profileInfo').html(HTML);
    }
});

或者您可以使用其他选择器：

$.ajax({
    url:"getProfile.php",
    success:function(HTML){
        $('.profileimage').find('.profileInfo').html(HTML);
    }
});

或者您可以使用jQuery的bind来确保正确的上下文：

$.ajax({
    url:"getProfile.php",
    success: $.proxy(function(HTML){
        $(this).find('.profileInfo').html(HTML);
    }, this)
});

或者您可以像这样使用closure（我最喜欢的）：

var self = this;
$.ajax({
    url:"getProfile.php",
    success: function(HTML){
        $(self).find('.profileInfo').html(HTML);
    }
});

Answer 2

尝试这种不那么优雅但教育方法......

$(document).ready(function() {
    $('.profileimage').hover(function() {
        var that = $(this);
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                that.find('.profileInfo').html(HTML);
            }
        });
    });
});

在AJAX响应上遇到jQuery定位器问题

2 个答案: