我一直在尝试将jQuery hovercard(http://designwithpc.com/Plugins/Hovercard)与我们的Web应用程序集成。当我们将鼠标悬停在用数据属性data-toggle =“user”标识的用户名链接上时,我们需要它来显示从AJAX页面收到的HTML。
到目前为止,这是我们的代码......
$('a[data-toggle="user"]').hovercard({
detailsHTML: 'Loading user details...',
width: 350,
cardImgSrc: 'http://ejohn.org/files/short.sm.jpg', //Dummy URL for now
onHoverIn: function() {
// set your twitter id
var user = 'jeresig';
$.ajax({
url: '/components/users/_hovercards/user-hovercard.php',
type: 'GET',
dataType: 'text',
beforeSend: function() {
$(this).text("Loading...");
},
success: function(data) {
$(this).empty();
$(this).text(data);
},
complete: function() {
},
error: function() {
//$(this).text("An error occured in loading the user hovercard");
$(this).text("An error occured loading the user data...");
}
});
}
});
问题是这不会将来自AJAX页面的HTML附加到hovercard。我已经尝试了一些更改来诊断故障,当我明确调用$(this)值并尝试在AJAX行之外手动更改它以测试手动附加数据时我最终用手动附加的html替换链接数据本身并且不显示悬浮卡。
我在代码中的几个位置使用全局选择器将事件应用于具有特定数据切换值的所有元素,并使用$(this)选择器没有问题,但在这种情况下我遇到了问题。 / p>
提前致谢。