jQCloud icon indicating copy to clipboard operation
jQCloud copied to clipboard

afterCloudRender not recognizing the spans

Open dietah opened this issue 11 years ago • 2 comments

In a tool I'm developing we need to be able to trigger some actions for each word in the generated cloud.

When using the afterCloudRender the correct callback is triggered but none of the words are found.

var _MakeWordsClickable = function () {
        console.log('callback start');
        console.log($('div#wordcloud span').size());

        $('div#wordcloud span').each(function () {
            $(this).click(function () {
                console.log($(this).text());
            });
        });

        console.log('callback end');
    }

The console shows 'callback start' and 'callback end' but the size of the spans is 0.

When I execute the code with a timeout of 200 miliseconds everything works.

$("#wordcloud").jQCloud(objCloud, { afterCloudRender: setTimeout('_MakeWordsClickable()',200) });

I tried to circumvent the timeout by using the afterWordRender at each word, but the same problems exists.

So in essence, jQCloud is not waiting until the cloud is completely rendered.

Thanks for looking into this.

dietah avatar Apr 23 '13 08:04 dietah

same problem here, is there a better fix than using timeout? thanks, chris

descl avatar Jan 02 '14 09:01 descl

Hi Chris,

In _MakeWordsClickable() I used the jQuery .on() command which is like a live bind, so as each word is added to the cloud it automatically gets that code.

For example:

var _MakeWordsClickable = function(){   
        $('div#wordcloud').on('click', 'span', function(){
            // do something
        });             
}

This way there is no need for a timeout, which would be subject to the amount of words loaded.

Hope this helps.

Thanks, Dieter

dietah avatar Jan 09 '14 08:01 dietah