Question

我的目标是当鼠标位于<a href="#"><img src="../icons/help.gif" alt="Help"/></a>时显示弹出文本。结果，我使用了qtip库。如果我不使用DOM appendChild（）方法，它工作正常。但是，当我使用它时，它会失败。

代码如下：

.js文件包含： //以下代码用于使用qtip（jQuery插件）显示弹出窗口

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

谢谢。

Answer 1

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

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

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

请参阅qTip2网站上的实时和委托教程：

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

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

qtip + DOM appendchild（）方法=不显示弹出窗口。为什么？

1 个答案: