2

In my jquery code, I am trying to //Do things every time the page is reloaded/refreshed and when the select box is clicked. But when I add the ready function (as in document is ready,) yet what is supposed to go inside //Do things, only gets executed with a click event, but not ready.

How can I fix this?

jQuery(document).ready(function(){
      jQuery("select").bind("change ready", function(){
         //Do things
      });
1
  • this is stack overflow (outdated comment about needing to be moved to SO)
    – govinda
    Jan 15, 2013 at 4:30

4 Answers 4

4

You can simply pull out the code into another function, and call that both on page load and on change:

jQuery(document).ready(function(){
    var func = function() {
        // do things
    };

    // this does things whenever the <select> changes
    jQuery("select").on("change", func);

    // this does things once, when the page loads
    func();
});

I also changed bind to the recommended on instead (as of jQuery 1.7) -- this does not change the behavior at all.

2
  • what happens if there are more then one select box, and do things refers to what the select has for value?
    – voigtan
    Mar 15, 2012 at 7:39
  • @voigtan: I don't think that's a meaningful question based on the (little) information the OP has provided. I 'd be happy to reconsider when more information is forthcoming.
    – Jon
    Mar 15, 2012 at 7:43
1

I think you are looking for the .trigger method in jQuery, you want to trigger the function in your bind event:

jQuery(document).ready(function(){
    jQuery("select").bind("change", function(){
        //Do things
    }).trigger("change");
});
2
  • If there are many select boxes this will call the handler multiple times on page load. Not sure if that's what the OP intends.
    – Jon
    Mar 15, 2012 at 7:44
  • @Jon I may be wrong, but if the OP wants to trigger the same event on "ready" event then this the result is that he wants to trigger all the select boxes on a document.
    – voigtan
    Mar 15, 2012 at 8:05
1

The document.ready() function waits until your whole document is loaded and the dom tree is built. Thats why it is a good idea to wrap your code within the document.ready(). If you didn't do this, it might happen that your call jQuery("select") does not find any element, because there is no domtree yet.

Now if you want to //Do things when clicking upon your select elements, you can either:

jQuery("select").click(function(){

});

or

jQuery("select").on("click", function(){

});

This binds a handler for a click-event to each of your select elements.

Check out the jquery docs for more info.

0

you can do this:

$(function(){
    $(":checkbox").click(function(){
        // do your anything
    });
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.