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

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

我正在做什么 – 一个简单的AJAX调用hover在元素上，并将该响应放在DIV中。 这是我网站上的代码无效…

HTML

   
Test Here
  
  

jQuery的

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

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

 
RESULTS FROM AJAX 

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

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

所以我想我的问题是……如果定位器在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); } }); }); });