When using jQuery document ready, i.e. $(document).ready(function() { } is there any chance that the DOM has not fully loaded yet?

I am using some 3^rd party tools (Telerik's grid) and have set a client template to display a checkbox instead, just like this. Code:

.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= OrderID #>' />")

The reason I ask is that I am attempting to hook up an event to all checkboxes to monitor change:

$(':input').change(
    function () {
       alert('you fired!');
});

I put a checkbox manually outside of the Telerik grid code, and it hooks up to the checkbox changing, but none of the checkboxes inside the telerik grid do...

And in that case - is there a work around?

When using jQuery document ready, i.e. $(document).ready(function() { } is there any chance that the DOM has not fully loaded yet?

I am using some 3^rd party tools (Telerik's grid) and have set a client template to display a checkbox instead, just like this. Code:

.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= OrderID #>' />")

The reason I ask is that I am attempting to hook up an event to all checkboxes to monitor change:

$(':input').change(
    function () {
       alert('you fired!');
});

I put a checkbox manually outside of the Telerik grid code, and it hooks up to the checkbox changing, but none of the checkboxes inside the telerik grid do...

And in that case - is there a work around?

• javascript
• jquery
• dom

• 1 Worked with Telerik in the past, and looks like they're adding the DOM elements after page load, so .live() should work fine for you. – Shadow Wizzard Commented Aug 22, 2011 at 8:17

2 Answers 2

Try using live,

$(':input').live('change', function() {
                alert('you fired!');
            });

Edit

.live() is deprecated form version 1.7 and is removed since version 1.9: Instead live use on()

There's no chance that the statically defined DOM in the HTML page is not loaded yet at $(document).ready(). But, if you're using a third party library that is dynamically loading or creating HTML, there is no guarantee that the library has done it's business at the time of $(document).ready(). In fact, it's very likely that is has not.

You have a couple options:

1. You can find an event that is triggered after the third party library has created it's HTML and thus the checkboxes now exist and then use tranditional jQuery to hook up to them.
2. You can use the .live() capabilities in jQuery to capture events for even DOM objects that don't exist yet at the time you specify that you want to hook up to them. You can read about .live() here: http://api.jquery./live/. It works mostly like a normal event handler except that it only works for some events and there are some differences in how you might stop propogation.