我知道这是近一年老了,但我只是在寻找做同样的事情,我想我会发布我的发现。我并不完全确定你在做什么,它可能与我所拥有的不同,但我假设你想像我那样对动态加载的中的某些元素应用qTip。
它并不解决问题live()
,即使根据Adding a row to a table in an iFrame with jQuery (live?)它应该工作,但这里是我结束了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
iframe {
border:1px dashed red;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery.qtip.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.qtip.min.js"></script>
<script type="text/javascript">
$(function() {
$('p a.tip').qtip({
content: 'foo'
});
$('iframe').load(function() {
var position = $(this).position();
var top = position.top;
var left = position.left;
$(this.contentDocument).find('p a.tip').qtip({
content: 'bar',
position: { adjust: { x:left, y:top } }
});
});
$('#click').click(function(){
$('iframe').attr('src', 'test.html');
return false;
});
});
</script>
</head>
<body>
<p><a class="tip" href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit.</a></p>
<iframe></iframe>
<p><a href="#" id="click">Load iFrame</a></p>
</body>
</html>
这里的test.html包含:
<p><a class="tip" href="#">Duis massa metus</a>, convallis vitae, mollis vel, feugiat vitae, nunc.</p>
,你可以从qTip2得到jquery.qtip.min.css
和jquery.qtip.min.js
。
编辑:确保页面从Web服务器(不仅作为本地文件加载)在浏览器中加载,以避免Same origin policy。
希望这对某人有用! :-)