Take the 2-minute tour ×

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 3rd 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:

    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?

share|improve this question
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 Wizard Aug 22 '11 at 8:17
add comment

2 Answers

up vote 4 down vote accepted

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.com/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.
share|improve this answer
add comment

Try using live,

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


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

share|improve this answer
Here is the documentation for live for better understanding: api.jquery.com/live –  Rumplin Aug 22 '11 at 8:22
just be careful, .live() is deprecated form version 1.7 and is removed since version 1.9: api.jquery.com/live –  betatester07 Jul 18 '13 at 13:58
@betatester07 Thanks for the info. I have updated the answer. –  Jayantha Jul 19 '13 at 3:40
add comment

Your Answer


