2

I have the most simple .on function i could write. it started off as trying to validate a form on load, then after many minutes of frustration I tried the following:

  $('p').on('load',function(){
     console.log("hello"); 
  });

This doesn't even work. I'm baffled. Ive tried it both IN and outside of $(document).ready(), neither work, and ive also checked console, there are no errors with my JS.

What could be causing this, its making me so mad

Tallboy
  • 12,847
  • 13
  • 82
  • 173
  • 1
    What are you checking the load of? `p` elements don't naturally fire a load event because they don't load anything. – Kevin B Jul 27 '12 at 19:37
  • what would be a better event? – Tallboy Jul 27 '12 at 19:38
  • Note that p is a paragraph tag, not a div - but you are still correct. – Stefan H Jul 27 '12 at 19:38
  • Sorry, fixed comment. :P – Kevin B Jul 27 '12 at 19:38
  • I personally think that the `load` function should print something to console to tell the user that the element doesn't fire the load event if they try - perhaps something to propose on the jQuery forums at some point. – ClarkeyBoy Jul 27 '12 at 19:40
  • 1
    I'm trying to check when a div appears on screen thats being dynamically injected in – Tallboy Jul 27 '12 at 19:40
  • Do you not have control over the piece of code where it is inserted? – ClarkeyBoy Jul 27 '12 at 19:41
  • How is the div being inserted? Use the callback of that function to notify. – j08691 Jul 27 '12 at 19:41
  • Alright, I do have control over it. That's very odd though, so jquery really has NO way of detecting when an element is 'loaded' (i use the term loosely)? Thats crazy.... i never knew that... – Tallboy Jul 27 '12 at 19:43
  • why does an anchor link work with $('.a:first').on('click')? isnt it somehow checking if its loaded first? if it can be 'inserted in' to the html... then somehow it must 'know' if its loaded – Tallboy Jul 27 '12 at 19:44
  • I just want to run $('.comment-form').validate() after its dynamically inserted with replaceWith(); – Tallboy Jul 27 '12 at 19:45
  • you can check if something is on the page using the .length – Huangism Jul 27 '12 at 19:45
  • No,

    elements aren't loaded. If you're injecting them yourself, can't you also call this function yourself? ie: Why not call validate() right after the replaceWith()?

    – WhyNotHugo Jul 27 '12 at 19:45
  • so since you have control over the injection code, why not jsut call validate after it is injectd? – Huangism Jul 27 '12 at 19:45
  • yes I can, I didnt think of that before, i just thought I could use .load to see when all the elements are loaded. I didnt know that doesnt apply to p or div, although Im still confused how it works for anchor links whent hey arent loading anything either – Tallboy Jul 27 '12 at 19:46
  • They're not loaded, they're created. Different things really. – WhyNotHugo Jul 27 '12 at 19:46
  • @tallboy it also doesn't work for anchor links. – Kevin B Jul 27 '12 at 19:46
  • All that $('.a:first').on('click') does is get the first anchor and attach a click event handler to it. It does not need to check if the anchor is loaded, because it will only find anchors that are already loaded. – Stefan H Jul 27 '12 at 19:48
  • so How does (".comment-reply').on('load') work properly? because its being created? i just dont see how the link AND the form are in the same bit of code being replaced, yet the link works, and the form does not – Tallboy Jul 27 '12 at 19:48
  • Sorry, it was a form not a div, that was my mistake – Tallboy Jul 27 '12 at 19:48
  • Sorry i should have been more clear. I have an anchor link which is dynamically loaded in with this: `$('.comments').on('click', 'a.see-them',function...` how does this work, but doing the exact same thing for load not work on the `form`? – Tallboy Jul 27 '12 at 19:50
  • im not worried about my code any longer, just for learning sake.. – Tallboy Jul 27 '12 at 19:51
  • 1
    `click` works because it is an event fired by the user clicking an element. Click should, in theory, work on all elements which take up space on the screen (even if they aren't visible to the user). The same principle of links not firing a `load` event applies, hence you can't call `$("a").on("load", function() {});`. Its just the way browsers work. If they do start supporting the `load` event in the future (say in the next version of Chrome or Firefox), don't expect it to be supported at least until IE 14! – ClarkeyBoy Jul 27 '12 at 19:51
  • so the takeaway is that i should use the .length property to check, or use a callback? – Tallboy Jul 27 '12 at 19:52
  • Just on a side-note, jQuery still has the exact same limitations as JavaScript, it just gives developers easier access to things like animations and selecting elements based on the all-too-familiar CSS syntax. JavaScript events are limited to the events supported by the browser, i.e. it is down to the browser as to which events are fired on which elements. Therefore jQuery events are also limited to these but can also include custom events for various plugins. The `load` event, however, still requires the browser to fire it for jQuery to pick it up, is my understanding. – ClarkeyBoy Jul 27 '12 at 19:58
  • 1
    "so the takeaway is that i should use the .length property to check, or use a callback?" - either of these should do, but I think the .length property should be better overhead-wise. It depends - if you're loading an entire page (clientlist.aspx for example) into a div, use the callback function as you don't know exactly what is going to be in there. – ClarkeyBoy Jul 27 '12 at 20:00

3 Answers3

1

jQuery does not have a way of firing an event the first time a particular element becomes available. You can do it with setInterval, however there are usually much better ways to handle it depending in the situation.

setInterval(function(){
    $("p").not(".alreadyloaded").trigger("load").addClass("alreadyloaded");
},100);
$(document).on('load','p',function(){
    console.log("hello"); 
});

I do not suggest using this method if at all possible.

A better way of handling it would be to either use the callback of the event that is adding the p element (such as the success of the .load() or $.ajax) or by binding delegated events, such as $(document).on('click','p',function(){ alert('hello'); });

Kevin B
  • 94,570
  • 16
  • 163
  • 180
1

ps, divs and other elements don't have a load-event - thats only available on images, windows, frames and iframes.

oezi
  • 51,017
  • 10
  • 98
  • 115
1

demo

You can always check for existence using length:

var par = $('p.paragraph'); // make it special with some ID or class


if(par.length){         // If your elements exists....
   alert(" I'm 'LOADED!' ;) ");
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313