Search code examples
jquerydompopupqtippopupwindow

qtip + DOM appendchild() method = popup window is not displayed. Why?

My goal is to display a popup text when the mouse is on the <a href="#"><img src="../icons/help.gif" alt="Help"/></a>. As result, I used qtip library. It works fine if I don't use DOM appendChild() method. But, when I use it, it fails.

The code is below:

.js file contains: //the code below is for displaying popup windows using qtip, a jQuery plugin

$(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'
});


});

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

The first way I did it (without DOM appendchild() method, the code is below), it looked fine. A popup window appears when you put your mouse on this icon, so everything is perfect. .php file contains

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.

The second way: Here is a problem. I want that icon to be added after the page was loaded (I tried to use DOM appendChild() method). It loads fine, but you don't see a popup window when you put a mouse on it. Here is what I didi: .php file contains:

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 file contains

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);
}

The first time addtext function is called on window.onload. Once the page is fully loaded, everything is fine. You see the help icon, everything works fine, no javascript mistakes. The only problem is that you don't see the popup window when you move a mouse on it. Could anybody please explain me why?

Thank you.

Solution

  • It sounds like you're looking for the live/delegate functionality of jQuery 1.4+

    Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

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

    See the live and delegate tutorial on the qTip2 web site:

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

    Basically, using this to bind your qTips will cause any future elements that match the selector to have the tooltip applied to them as well. Hope that helps.