CODEWITHSUNDEEP
jqueryhtml
oimoim
oimoim

Reputation: 449

Elements in ajax loaded div not accessible from jQuery

I am using jQuery's $.get() to load some content to a div whose id=results :

$.get('dynamicpage.php',
function(data) {
 $('#results').html(data);
});

The returned content has got a select in it :

<select id="myselect"><option value="10">10</option></select>

I have already put a listener for the change on this select :

$('#myselect').change(function() {
    alert("changed");
});

However, this alert in the listener never gets fired.

Do I need to do something special to access elements in the loaded div from jQuery ?

Thank you !

Upvotes: 0

Views: 1380

Answers (2)

user113716
user113716

Reputation: 322492

Try this:

$.get('dynamicpage.php',
   function(data) {
       $(data).find('#myselect').change(function() {
            alert("changed");
        })
        .end().appendTo('#results');
});

Here you .find() the #myselect and attach the change event.

Or this:

$('#results').delegate('#myselect', 'change', function() {
            alert("changed");
        });

$.get('dynamicpage.php',
   function(data) {
       $('#results').append(data);
});

Here you attach a .delegate() handler to #results that will listen for the change event on #myselect. This is a little more efficient than .live().

Upvotes: 1

Jacob Mattison
Jacob Mattison

Reputation: 51052

The issue is that, at the point you added the change event handler to the select, that select didn't exist (or the one that did exist has since been replaced).

You should use the jQuery live() function instead, which will maintain the event binding even if the element is added later.

Upvotes: 1

Related Questions