Using jQuery on dynamically added content

Question

I am newbie to jQuery and javascript. In my application I have a list of users. When a particular user is clicked from the list, a div element is replaced with details about the user dynamically. When another user is clicked, again I replace the same div element with this user details. So at a time only one user details can be seen.

I use jquery, so my code to the above description looks like.

$('table#moderate_users tr').click(function() { $.get('/moderate/user/'+uid, function(data){ $('div.user_info').html(data); }); });

This works perfect and the content is inserted dynamically. I have a dropdown(html select tag) in the dynamically added content. So I get the dropdown only when i click on a user from the list and it changes repectively when I click on another user. I wanted to find the value of the select tag using jquery whenever it is changed. So I wrote

$('select#assign_role').change(function(){ alert(this.val()); });

Since this dropdown is added after document.ready, adding this script inside document.ready function never worked. I also tried to insert the above script along the with the user details which is dynamically added.For my surprise this script is not inserted into the document at all, while the rest of the HTML content are inserted perfect. I am not aware if i can add insert javascript after the document has loaded. I am not aware how i could use jQuery to find out the value of the select tag which is added dynamically. Thanks.

Mike Sherov · Accepted Answer · 2010-01-30 20:10:03Z

4

you want jQuery's "live" functionality:

$('select#assign_role').live('change',function(){
alert($(this).val());
});

also notice I changed alert(this.val()); to alert($(this).val()); considering that this inside a jQuery event handler references the actual dom element, not a jQuery object.

answered Jan 30, 2010 at 20:10

Mike Sherov

13.4k9 gold badges43 silver badges64 bronze badges

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

3 Comments

Mike Sherov Over a year ago

.live doesn't need to be inside document.ready, as it by definition works on things that still won't be there yet. Although, putting it inside the document.ready is a force of habit I have, so it can't hurt putting it there.

Mike Sherov Over a year ago

did you also change the alert clause as I suggested? Furthermore, can you inspect the select elment once it's dynamically inserted and guarantee that its id is "assign_role"?

Deepak Over a year ago

Changing the alert clause like how you suggested, worked. Many thanks mike :)

Ilya Volodin · Accepted Answer · 2010-01-30 20:12:41Z

0

From the looks of your code, it seems that you are inserting a chunk of HTML into that div. So even if you wire your event to the dropdown after the page load, it will not work, since all of your event binding will be ignored when you insert new HTML code into div. Try moving your code inside the function that inserts HTML. Something like this:

    $('table#moderate_users tr').click(function() { 
    $.get('/moderate/user/'+uid, function(data){
    $('div.user_info').html(data);
     $('select#assign_role').change(function(){
      alert(this.val());
     });
    });
    });

answered Jan 30, 2010 at 20:12

Ilya Volodin

11.3k2 gold badges49 silver badges49 bronze badges

1 Comment

Deepak Over a year ago

Hi, thanks. I tried moving into the function it doesnt help. .live function doesnt help too.

James Black · Accepted Answer · 2010-01-30 20:58:18Z

0

On IE the live function doesn't work for onchange on <select> elements.

http://www.neeraj.name/blog/articles/882-how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery

You will need to either add the select then do a setTimeout and then bind with the jquery.bind type of functionality, or, what I have done, is when you create the element then just set the onchange event handler there directly.

If you don't need to support IE then the live function works great.

answered Jan 30, 2010 at 20:58

James Black

41.8k10 gold badges92 silver badges172 bronze badges

Collectives™ on Stack Overflow

Using jQuery on dynamically added content

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related