0

我在这里努力想弄清楚为什么这不起作用，所以我终于创建了我在 jsFiddle 上的简化版本，当然它在那里工作。

我在做什么 - 一个简单的 AJAX 调用，将鼠标悬停在一个元素上，并将该响应放在一个 DIV 中。这是我网站上不起作用的代码...

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 响应中使用它都不能正常工作。

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

4

2 回答 2

3

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);
    }
});

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

    $.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);
    }
});
于 2013-11-06T20:00:49.150 回答
1

试试这种不太优雅但有教育意义的方法......

$(document).ready(function() {
    $('.profileimage').hover(function() {
        var that = $(this);
        $.ajax({
            url:"getProfile.php",
            success:function(HTML){
                that.find('.profileInfo').html(HTML);
            }
        });
    });
});
于 2013-11-06T20:00:38.597 回答