Call Function On Dynamically Added Elements

I am quite new to javascript and jquery so this might be a really simple problem. Please don't mind. I am appending new link(a) elements in division with id = 'whatever' by $('#wh

Solution 1:

var $link = $('<a>').attr('href', 'url').text('blah');
$("#whatever").append($link);
$link.tagcloud();

$(document).on("change" will never fire.

Solution 2:

A response to your edit, try this:

$(document).on("change", '#whatever', function () {
    $("#whatever a").tagcloud();  
});

I think you might have forgotten the # in your selector.

Solution 3:

It seems it doesn't work as expected as you are missing adding rel attribute to the to-be-appended element(s).

// ...// The plugin reads the rel attributesvar tagWeights = this.map(function(){
   return $(this).attr("rel");
});

Try this:

$('<a>').attr({'href': 'url', 'rel': 'value'})
        .text('blah')
        .tagcloud()
        .appendTo('#someWhere');

http://jsbin.com/uBAzItuj/3

Solution 4:

First in your example $("whatever a") should be $("#whatever a") but also when I have this situation I delegate in the same action as the append

$("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah'));
$('#whatever a').off();
$('#whatever a').tagcloud();

Solution 5:

Try this:

$("body").on("tagcloud", "#whatever", function(){
     $("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah')); 
});

Check this similar question out for more info:

Event binding on dynamically created elements?

Also, jQuery has some info on it:

http://api.jquery.com/on/

I wanted to leave this as a comment, but couldn't. Hope it helps.