Question

How can we use jQuery .on() method with load event? e.g. The code is:

<a href="#" id="add">Add</a>
<div id="initial">
     <input type="text" class="abc" name="in">
</div>

And the jQuery for it:

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

Answer 1

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