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, Nov 30 '13 at 20:42
I am doing that only. First appending all the elements and then calling plugin. — VikkyB, Nov 30 '13 at 20:43
If the method returns a jQuery object, what's wrong with `$("#whatever").append(jQuery('').attr('href', 'url').text('blah').tagcloud());` ? — Ram, Nov 30 '13 at 20:49
@undefined - Not working :( It is not showing previous elements also. — VikkyB, Nov 30 '13 at 20:55
What does `tagcloud()` method do? What about creating a demo on http://jsfiddle.net and reproducing the problem? So that people can suggest a _working_ way. — Ram, Nov 30 '13 at 20:59
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42255/discussion-between-vikas-bansal-and-undefined) — VikkyB, Nov 30 '13 at 21:12
Which tagCloud plugin are you using? There are a bunch of different ones. — jfriend00, Nov 30 '13 at 21:29

score 1 · Answer 1 · answered Nov 30 '13 at 20:43

1

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

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

answered Nov 30 '13 at 20:43

Alex

11,115
12
51
64

Misprint, add `$link` – Alex Nov 30 '13 at 20:45
Because `innerHTML` or `appendChild` or any DOM manipulation didn't fire change event on document. Add [fiddle](http://jsfiddle.net/24MRs/). – Alex Nov 30 '13 at 20:50
This is not working as well. It is not able to show old elements. – VikkyB Nov 30 '13 at 20:56

score 1 · Answer 2 · answered Nov 30 '13 at 21:00

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 '13 at 21:00

James Y

67
1
7

score 0 · Answer 3 · answered Nov 30 '13 at 20:47

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 '13 at 20:47

chiliNUT

18,989
14
66
106

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. – jfriend00 Nov 30 '13 at 20:51
the reason to remove old ones is because, if `#whatever` has multiple `` 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. – chiliNUT Nov 30 '13 at 21:05

score 0 · Answer 4 · edited May 23 '17 at 11:52

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 '17 at 11:52

Community

1
1

answered Nov 30 '13 at 20:49

James Y

67
1
7

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. – James Y Nov 30 '13 at 20:53

Ram · Accepted Answer · 2013-11-30T22:00:57.760

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 '13 at 22:00

answered Nov 30 '13 at 21:47

Ram

143,282
16
168
197

Yes I just figured that out a minute ago. Thanks anyways. – VikkyB Nov 30 '13 at 22:01

score -1 · Answer 6 · answered Nov 30 '13 at 20:45

-1

Try this:

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

answered Nov 30 '13 at 20:45

sideroxylon

4,338
1
22
40

How can an anchor trigger change event? – Ram Nov 30 '13 at 20:55
Adding an anchor does not trigger a `.change()` event. – jfriend00 Nov 30 '13 at 21:25

Call function on dynamically added elements

6 Answers6

Linked