Моя цель - отображать всплывающий текст, когда мышь находится на <a href="#"><img src="../icons/help.gif" alt="Help"/></a>
.В результате я использовал библиотеку qtip.Это работает нормально, если я не использую метод appendChild () DOM.Но когда я его использую, он не работает.
Код ниже:
.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.Как только страница полностью загружена, все в порядке.Вы видите значок справки, все работает нормально, без ошибок JavaScript.Единственная проблема заключается в том, что вы не видите всплывающее окно, когда вы наводите на него мышь.Кто-нибудь может объяснить, почему?
Спасибо.