Using jQuery on dynamically added content

Question

Hello, 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.

Answer 1

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.

Answer 2

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

Answer 3

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.