qtip + DOM appendchild()方法=不显示弹出窗口.为什么

Question

我的目标是当鼠标放在<a href="#"><img src="../icons/help.gif" alt="Help"/></a>上时显示一个弹出文本。因此，我使用了qtip库。它工作良好，如果我不使用DOM appendChild()方法。但是，当我使用它时，它失败了。

代码如下:

.js文件包含://下面的代码是使用jQuery插件qtip显示弹出窗口

$(document).ready(function() 
{
$.fn.qtip.styles.popuphelpstyle = {
    tip: 'rightTop',
    width: 400,
    padding: 2,
    border: {
        width: 5,
        radius: 5,
        color: '#5a5b5c'
    },
    background: '#fafbfc',
    color: '#934'
}

$('#popupone img[src]').qtip(
{
    content: 'Text number <b>one</b>',
    style   :   'popuphelpstyle'
});
$('#popuptwo img[src]').qtip(
{
    content: 'Text number <i>two</i>',
    style   :   'popuphelpstyle'
});

});

=============================================

我的第一种方法(没有DOM appendchild()方法，代码如下)，看起来很好。当你把鼠标放在这个图标上时，会出现一个弹出窗口，所以一切都很完美。php文件包含

echo 'Move your mouse here: <a href="#" id="popupone"><img src="../icons/help.gif" alt="Help"/></a> if you need some help, popup should appear'; //Works fine, you see "Text number one" ("one" is bold) in the popup window.

第二种方式:这里有一个问题。我希望在页面加载后添加该图标(我尝试使用DOM appendChild()方法)。它加载得很好，但是当你把鼠标放在上面时，你看不到一个弹出窗口。以下是我所做的:

echo '<div id="div100"></div>';//here we will add some text + help icons as many times as we press the link below
<span id="addmore"><a href="javascript:;" onclick="addtext();">press me if you want to add one more text+help icon</a></span>

.js包含

function addtext()
{
    var num=1;
    var newdiv = document.createElement('div100');
    var divName = 'my'+num+'Div';
    newdiv.setAttribute('id',divName);
    newdiv.innerHTML =divName+'<a href="#" id="popupone"><img src="../icons/help.gif" alt="Help"/></a>';//The text "my1Div" and the icon help.gif near "my1Div" are displayed when function addtext(); is called.
    ni.appendChild(newdiv);
}

第一次在window.onload上调用addtext函数。一旦页面完全加载，一切就都好了。你看到帮助图标，一切正常，没有javascript错误。唯一的问题是，当你在上面移动鼠标时，你看不到弹出窗口。有人能解释一下吗?

谢谢。

Answer 1

听起来你在寻找jQuery 1.4+的live/delegate功能

描述:为所有元素的事件附加一个处理程序匹配当前选择器，现在，将来。

http://api.jquery.com/live/

查看qTip2网站上的实时和委托教程:

http://craigsworks.com/projects/qtip2/tutorials/events/生活

基本上，使用它来绑定qTips将导致任何与选择器匹配的未来元素也将工具提示应用于它们。