Jquery on() load event on a single element

Question

I'm sorry if this question has already been asked, but i didn't find a solution.

I have 3 radios elements and I want to check the value when the selection changes and when the page loads.

I would do that by using only the on() function.

My problem is that only the change event is triggered.

Here is my current code :

$('.user').on('load change', function(){
  if($(this).val() == 'client'){ 
$('#user_parent').removeAttr('disabled').closest('tr').show(200);
}else{
  $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
}
});"

I also tried to replace load by ready, but it failed too. What the problem ? Isn't the load event available for a single element ?

The code is placed in $(document).ready(...), and the elements are all displayed when the page is sent.

Thanks

http://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector — rahularyansharma, Jul 01 '13 at 08:31
I also tried "$(document).on('ready change', '.user', function(){". I thought that the load event applied on an element was trigged when the element is loaded, like document. — FLX, Jul 01 '13 at 08:34

Vogel612 · Accepted Answer · 2013-07-01T09:15:21.430

21

the load event will be called the moment all child elements of the listened element are loaded. in your case this might be before the ready event is called, thus rendering your handler to load (which is appended after document.ready) useless.

for reference see JQuery api where you will find the following:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

this also means you need an URL, so you can listen to the load event. as you have not provided further code I assume you do indeed have an URL you can listen to.

This might be the most probable cause though. if you do not have any URL associated with (at least one) child element(s) there will be no load event you can listen to.

try this instead:

$(document).ready(function(){
   checkUserVal();
   $('.user').on('change', checkUserVal);
});

var checkUserVal = function(){
  //do the check
  if($('.user').val() == 'client'){ 
     $('#user_parent').removeAttr('disabled').closest('tr').show(200);
  }else{
     $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
  }
};

i made the code a method for improved readability ;)

edited Jul 01 '13 at 09:15

answered Jul 01 '13 at 08:37

Vogel612

5,620
5
48
73

@roasted thanks for fixing me up there. the fun thing is, the load event for the element he listens to, might still be called before ready, see updated answer – Vogel612 Jul 01 '13 at 08:43
The thing is you can attach handler to an element only when the element is ready/available in the DOM. I can think about a case where you attach onload event to an image/script just after this element tag and this element is already cached. In this case i think you are right, the onload event should be fired before the document ready. Anyway, nice input indeed +1 – A. Wolff Jul 01 '13 at 08:49
Thanks for the answer, would it be better to do a function like this solution or to make a custom event that i trigger on document ready ? Because i will use this system multiple times. – FLX Jul 01 '13 at 08:53
1

@Vogel612 following my previous comment, even cached, the onload event of an image is still fired after the document ready: http://jsfiddle.net/w4zSj/ – A. Wolff Jul 01 '13 at 08:55
@FC' well it greatly improves maintainability and overview if you move repetitive tasks into generic functions. this allows you to reuse your code over and over if facing the same problem – Vogel612 Jul 01 '13 at 08:58
@roasted but if there is no URL present, then the event will not be called see: http://jsfiddle.net/fyeg2/1/ – Vogel612 Jul 01 '13 at 09:02
1

@Vogel612 div doesn't have any onload event to attach with. So for sure, onload event won't be fired. – A. Wolff Jul 01 '13 at 09:10
@roasted and exactly that might be the problem here. it seems there is no attachable onload event for the `$('.user')` element. thus it will not be fired – Vogel612 Jul 01 '13 at 09:12
@Vogel612 that was the problem and that's why your fix using document ready to call same function as onchange event is a good one – A. Wolff Jul 01 '13 at 09:15

score 9 · Answer 2 · answered Oct 08 '14 at 23:12

As Vogel612 explained, load doesn't fire for most elements.

ready is only for document.

You can use each to run your event handler initially.

$(document).ready(function(){
  $('.user')
    .each(user_handler)
    .on('change', user_handler);
});

var user_handler = function(){
  // this
};

Hisham Dalal · Answer 3 · 2020-11-29T15:02:45.493

1

<script>
jQuery( 'document' ).on("load ready", function() {
    $('.user').on('change', function(){
        if($(this).val() == 'client'){ 
            $('#user_parent').removeAttr('disabled').closest('tr').show(200);
        }else{
            $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
        }
    });
    // just do this:
    $('.user').change();
    });
</script>

edited Nov 29 '20 at 15:02

answered Nov 12 '20 at 15:47

Hisham Dalal

565
4
10

Jquery on() load event on a single element

3 Answers3

Linked