How can I get controls in my Update Panel to work correctly with my JQuery?

Question

I have a control that is loaded via an update panel and there are items in it that are not initially displayed when the user first loads the page. I’m using some jquery with this control and the problem that I’m having is a typical one where I’m not able to fire the jquery ready event in order to rebind the elements in the control. It works fine when the control is loaded on its own page but when it’s a part of the larger structure and buried inside it this just doesn’t seem to work.

I’ve tried methods like binding to pageLoad but it doesn’t seem to work and suspect that it’s related to the javascript code being inside the control itself.

   function pageLoad(sender, args) {LoadScripts();}

So i have a structure like this

Master page
    Aspx Page
        Update panel
            Other controls
            Control with JQuery

I would appreciate any help that you can offer.

Answer 1

Take a look at jQuery .live(), just for such occasions: http://api.jquery.com/live/

For example:

$('.clickme').live('click', function() {
  // works for AJAX loaded content.
});

If that doesn't work for you, there's still a simple solution: Load the script with the ajax content. You don't have to call load or ready - just call your JavaScript in a new <script> tag, and it will run well - jQuery is already loaded. If you want to use the exact same code you used before, create a function of it and call that.