qtip + DOM appendchild() 方法 = 不显示弹出窗口。为什么？答案

【问题标题】：qtip + DOM appendchild() method = popup window is not displayed. Why?qtip + DOM appendchild() 方法 = 不显示弹出窗口。为什么？
【发布时间】：2011-09-03 12:54:59
【问题描述】：

我的目标是当鼠标在<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() 方法）。它可以正常加载，但是当您将鼠标放在其上时，您看不到弹出窗口。这是我做的： .php 文件包含：

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 错误。唯一的问题是当您在其上移动鼠标时看不到弹出窗口。谁能解释一下为什么？

谢谢。

【问题讨论】：

标签： jquery dom popup qtip popupwindow

【解决方案1】：

听起来您正在寻找 jQuery 1.4+ 的实时/委托功能

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

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

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

http://craigsworks.com/projects/qtip2/tutorials/events/#live

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

【讨论】：

谢谢！ $("#link_to_add_one_item").live("click", function()){ ... } 有帮助！非常感谢！