qtip + DOM appendchild（）方法=不顯示彈出窗口。爲什麼？

我的目標是在鼠標位於<a href="#"><img src="../icons/help.gif" alt="Help"/></a>上時顯示彈出文本。因此，我使用qtip庫。如果我不使用DOM appendChild（）方法，它工作正常。但是，當我使用它時，它失敗了。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); 
}

第一次addtext函數調用上的window.onload。一旦頁面完全加載，一切都很好。你看到幫助圖標，一切正常，沒有JavaScript錯誤。唯一的問題是當你移動鼠標時，你看不到彈出窗口。有誰能解釋我爲什麼？

謝謝。

來源

2011-09-02 Haradzieniec