CODEWITHSUNDEEP
jqueryevents
Anand mohan sinha
Anand mohan sinha

Reputation: 588

jquery .on() method with load event

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');
    });
});

Upvotes: 31

Views: 195801

Answers (5)

Jose Paez
Jose Paez

Reputation: 847

One could just do something like:

jQuery(document).on('change', '#my_id', function() {
    // Your code can be here
})

jQuery('#my_id').change();

For your case

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

    $(document).on('change','.abc',function(){
        alert('started');
    // Your code can be here
    });

    $('.abc').change();
});

Upvotes: 0

Elliot Bonneville
Elliot Bonneville

Reputation: 53361

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.

Upvotes: 11

png
png

Reputation: 1130

As the other have mentioned, the load event does not bubble. Instead you can manually trigger a load-like event with a custom event:

$('#item').on('namespace/onload', handleOnload).trigger('namespace/onload')

If your element is already listening to a change event:

$('#item').on('change', handleChange).trigger('change')

I find this works well. Though, I stick to custom events to be more explicit and avoid side effects.

Upvotes: 0

Timo Huovinen
Timo Huovinen

Reputation: 55673

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.

Upvotes: 14

Imdad
Imdad

Reputation: 6042

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

Upvotes: 24

Related Questions