jquery .on() method with load event

Refer to http://api.jquery.com/on/

It says

In all browsers, the load, scroll, and error events (e.g., on an <img> element) do not bubble. In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.

If you want to do something when a new input box is added then you can simply write the code after appending it.

$('#add').click(function(){        $('body').append(x);        // Your code can be here    });

And if you want the same code execute when the first input box within the document is loaded then you can write a function and call it in both places i.e. $('#add').click and document's ready event

I'm not sure what you're going for here--by the time jQuery(document).ready() has executed, it has already loaded, and thus document's load event will already have been called. Attaching the load event handler at this point will have no effect and it will never be called. If you're attempting to alert "started" once the document has loaded, just put it right in the (document).ready() call, like this:

jQuery(document).ready(function() {    var x = $('#initial').html();    $('#add').click(function() {        $('body').append(x);    });        alert('started');    });​

If, as your code also appears to insinuate, you want to fire the alert when .abc has loaded, put it in an individual .load handler:

jQuery(document).ready(function() {    var x = $('#initial').html();    $('#add').click(function() {        $('body').append(x);    });        $(".abc").on("load", function() {        alert('started');    })});​

Finally, I see little point in using jQuery in one place and $ in another. It's generally better to keep your code consistent, and either use jQuery everywhere or $ everywhere, as the two are generally interchangeable.

To run function onLoad

jQuery(window).on("load", function(){    ..code..});

To run code onDOMContentLoaded (also called onready)

jQuery(document).ready(function(){    ..code..});

or the recommended shorthand for onready

jQuery(function($){    ..code.. ($ is the jQuery object)});

onready fires when the document has loaded

onload fires when the document and all the associated content, like the images on the page have loaded.