Call function on dynamically added elements

Question

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

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

And calling a function

$(function () {
  $('#whatever a').tagcloud();
});

on every link element inside that particular div. But this function is being called only on old elements and not on the ones that I just dynamically added. I tried doing this:

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

But its still not working.

And why not just wait until the elements are appended before you call the plugin ? — adeneo
– adeneo, Commented Nov 30, 2013 at 20:42
I am doing that only. First appending all the elements and then calling plugin. — VikkyB
– VikkyB, Commented Nov 30, 2013 at 20:43
If the method returns a jQuery object, what's wrong with $("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah').tagcloud()); ? — Ram
– Ram, Commented Nov 30, 2013 at 20:49
@undefined - Not working :( It is not showing previous elements also. — VikkyB
– VikkyB, Commented Nov 30, 2013 at 20:55
What does tagcloud() method do? What about creating a demo on jsfiddle.net and reproducing the problem? So that people can suggest a working way. — Ram
– Ram, Commented Nov 30, 2013 at 20:59

Alex · Accepted Answer · 2013-11-30 20:43:29Z

1

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

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

answered Nov 30, 2013 at 20:43

Alex

11.3k13 gold badges53 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

Misprint, add $link

Alex Over a year ago

Because innerHTML or appendChild or any DOM manipulation didn't fire change event on document. Add fiddle.

VikkyB Over a year ago

This is not working as well. It is not able to show old elements.

James Y · Accepted Answer · 2013-11-30 21:00:57Z

1

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.

answered Nov 30, 2013 at 21:00

James Y

671 silver badge7 bronze badges

Comments

Ram · Accepted Answer · 2013-11-30 22:00:57Z

0

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 attributes
var 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

edited Nov 30, 2013 at 22:00

answered Nov 30, 2013 at 21:47

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

VikkyB Over a year ago

Yes I just figured that out a minute ago. Thanks anyways.

chiliNUT · Accepted Answer · 2013-11-30 20:47:11Z

0

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

answered Nov 30, 2013 at 20:47

chiliNUT

19.5k14 gold badges72 silver badges116 bronze badges

2 Comments

jfriend00 Over a year ago

Why remove all event handlers and then reinstall them all. Why not do like Pinal's answer and just add event handlers to the newly created object.

chiliNUT Over a year ago

the reason to remove old ones is because, if #whatever has multiple <a> elements, you will end up re-adding events to them causing them to trigger multiple times. Its not that I don't "like" the other answer, this is just a different way of doing it and how I tend to do it. Pinal adds it to each new element, I add it to all children of the parent the element is being appended to.

Community · Accepted Answer · 2017-05-23 11:52:06Z

0

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.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Nov 30, 2013 at 20:49

James Y

671 silver badge7 bronze badges

1 Comment

James Y Over a year ago

Check the edit. Also, if you are going to -1 something, its kind to leave a comment why. I added an example that I hope works and also provided documentation on this subject.

sideroxylon · Accepted Answer · 2013-11-30 20:45:06Z

-1

Try this:

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

answered Nov 30, 2013 at 20:45

sideroxylon

4,4261 gold badge25 silver badges42 bronze badges

2 Comments

Ram Over a year ago

How can an anchor trigger change event?

jfriend00 Over a year ago

Adding an anchor does not trigger a .change() event.

Collectives™ on Stack Overflow

Call function on dynamically added elements

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related