javascript - AJAX 响应中 jQuery 定位器出现问题

Question

我在这里绞尽脑汁试图找出为什么这不起作用，所以我最终创建了一个我在 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) 替换 success 函数中的行，我就可以看到响应。不起作用的是响应永远不会进入 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);
      }
  });