jquery selector not finding elements when it loaded by ajax

Question

None of jQuery selectors working on loaded elements from server through Ajax requests, but it works good in normal mode.

$('#myid').change(function(){
  alert('OK!');
});

<select id="myid" >
 <option>1</option>
</select>

How to fix this issue?

Solution 1

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

As you are loading content by ajax.

You need to use Event Delegation. You have to use .on() using delegated-events approach.

Use

$(document).on('change','#myid', function(){
   alert('OK!');
});

Ideally you should replace document with closest static container.

Solution 2

$('#myid').live('change', function(){
    //and scope from $(this) here
    $(this).parents().find('.class:first').attr('id');
});

it's looks good!