Question

I am using JQuery to show a tooltip-Box after clicking an image. So far, I can select the correct div(s) and then I can identify the correct sub-div which contains the text-node as well. Unfortunately I am not able to get the text node of the sub-div. What is wrong – I am getting ‘null’ after calling html() on currentDescriptionContainer? Thanks in advance!

var tooltipItems = jQuery('.tooltipContainer').length;
var i=0;
for (i=0; i<tooltipItems; i++){
    jQuery('.tooltipContainer').eq(i).bind('click', function(){
    var currentContainer = jQuery('.tooltipContainer').eq(i);
    var currentDescriptionContainer = currentContainer.find('div');
    var currentDescriptionText = currentDescriptionContainer.html();
    console.log(currentDescriptionText);
    showRendererToolTipForIpad(this, currentDescriptionText);
    hideRenderedToolTipAfterTimeout();
    });
}

Answer 1

your code could be really simplified. try this code, open the console and see if the execution is correct

var tooltipItems = $('.tooltipContainer');
tooltipItems.bind('click', function() {
     var divs = $(this).find('div'), cdText;

     console.log('Element has %d descendent div/s' , divs.length);

     if (divs.length) {
         cdText = divs.text();
         console.log('Text found: ' , cdText);
         showRendererToolTipForIpad(this, cdText); /* this is the i-th DOM node */
         hideRenderedToolTipAfterTimeout();
     } 
});

Note that html() when applied to a collection of elements affects only the first element, so in this example I used text() instead (and I don’t know how many elements you’re expecting to retrieve)

About your code, I suspect you’re creating an involuntary closure that could be a cause of your problem : when the click event occurs you have

var currentContainer = jQuery('.tooltipContainer').eq(i);

but since the for cycle has already reached the end, the variable i will be the last index of your collection. So no matter what tooltip you click, currentContainer will always be a reference using that index