Jquery: bind load + change simultaneously

Question

In many cases, I need to bind a behaviour to an element after loading, and then after an event triggering (like "change"). I think the best way would be to make it in the same line:

$('#element_id').bind('load, change', function () {
...
});

But this works only for "change" and not for "load". There is a better way?

I removed the comma, but it doesn't work anyway. I think there would be some limitations with load — mazz
– mazz, Commented Sep 30, 2011 at 15:06

johndodo · Accepted Answer · 2011-11-07 13:07:47Z

58

I stumbled across the same problem. Removing comma is not enough, at least not in this case:

$(document).ready(function(){
    $('#element_id').bind('load change', function () {
        ... // (this DOESN'T get called on page load)
    });
});

I guess load events get triggered before $(document).ready().

This is a simple solution:

$(document).ready(function(){
    $('#element_id').bind('change', function () {
        ...
    });
    $('#element_id').trigger('change');
});

answered Nov 7, 2011 at 13:07

johndodo

18.5k17 gold badges102 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nathan McKaskle Over a year ago

Even this will loop the change event a billion times. No idea why. I tried this method and others and it just keeps wanting to loop.

johndodo Over a year ago

Are you triggering the event inside the function? It shouldn't loop, there must be an error somewhere. You can try making a minimal error case and posting code in a separate question; most likely you will figure it out before hitting "Post" button. :)

Nathan McKaskle Over a year ago

Not triggering it inside the function. $('#employeeDropDown').on('change', function (event) { var form = $(event.target).parents("form"); form.submit(); }).trigger('change'); or even as you put it above, will cause it to loop.

johndodo Over a year ago

I think you are - form.submit() probably triggers change event too. Use console.log() (or JavaScript debugger if you like) to see which part is looping. But really, this has nothing to do with this question, you should post your own. I can assure you there is nothing in the answer above which would make it loop - I use it frequently and it works.

oneWorkingHeadphone Over a year ago

Bind is deprecated since jQuery 3.0, but this still works perfectly (just replace bind with on then call trigger. Also, this is the "correct" way to call this according to the documentation now, not sure what it read back in 2011. Calling load on a ready event is considered unsafe and will not run when scripts are loaded dynamically. See: api.jquery.com/ready

|

stovroz · Accepted Answer · 2016-09-27 15:28:38Z

10

For already loaded content, when you want to run a function on an event and also straight away, you can use a custom event of your own naming to avoid triggering any existing bindings from libraries etc. on the built in events, e.g.

$(".my-selector").on("change rightnow", function() {
  // do stuff...
}).triggerHandler("rightnow");

answered Sep 27, 2016 at 15:28

stovroz

7,1052 gold badges52 silver badges61 bronze badges

Comments

DoctorMick · Accepted Answer · 2011-09-23 15:27:55Z

1

Don't you just need to remove the comma?

answered Sep 23, 2011 at 15:27

DoctorMick

6,80330 silver badges27 bronze badges

Comments

DMac the Destroyer · Accepted Answer · 2011-09-23 15:32:55Z

1

try it without the comma:

$('#element_id').bind('load change', function () {
...
});

http://api.jquery.com/bind/#multiple-events

answered Sep 23, 2011 at 15:32

DMac the Destroyer

5,3407 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

Jquery: bind load + change simultaneously

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related