JQuery function syntax?

Question

I am using jquery and new to jquery. i have below the code in section as below.

<script type="text/javascript">
    $(function () {
            $(".lbCriterionStep3").click(function () {

                    //code

     });
  });


   $(function () {
            $(".lbCriterionStep4").click(function () {

               //code

     });
  });


</script>

Is it proper to write like this? can function contain multiple $(function () ?

Thanks!

It will work, but what was your thinking behind it? Why not combine them? — James Allardice, Jun 26 '13 at 13:57
@techfoobar Sure you can. Event handlers always execute in the order they were bound with jQuery — Ian, Jun 26 '13 at 13:58
Thanks for your reply. but the problem is always only lbCriterionStep3 or lbCriterionStep3 is visible. both will not be displayed at a time. — user755806, Jun 26 '13 at 13:59
@Ian - Logically yes. But i remember running into a related issue a few months back (multiple ready bindings from multiple js includes). Hence the warning. — techfoobar, Jun 26 '13 at 14:00
@techfoobar You mean from multiple jQuery libraries loaded on the page? And therefore binding the events with each? — Ian, Jun 26 '13 at 14:01
@Ian - No, multiple app specific JS files (some plugins, some others) each having its own `.ready()` binding. I had a hard time ordering the execution. Solved it by combining the essentials. — techfoobar, Jun 26 '13 at 14:03
@techfoobar As long as your code was executed in the order you wanted/expected, then the event handlers were bound in that order, and therefore would execute in that same order. Maybe you had the `async="true"` attribute on them or something, because there's no reason they wouldn't execute in the order they were included — Ian, Jun 26 '13 at 14:05
@Ian - Coming to think about it, i had `async` and `defer` in all of them except jQuery core. Infact, i use `async` in all my projects for the non-core stuff. And i was stumped all this time.. Tks for the pointer. — techfoobar, Jun 26 '13 at 14:35
@techfoobar Interesting, if you weren't using them, I wouldn't know a possible cause. Well I'm glad I helped :) I know you know what they do, but they technically allow for the scripts not to be loaded in the order they were included, so the events won't necessarily be bound in the same order. I wasn't trying to fight you, I just didn't want the OP or other people to be confused :) — Ian, Jun 26 '13 at 14:45
@Ian - Not a problem at all. I've taken it only constructively. Construction knowledge sharing is whats best about SO. Thanks. I've removed the incorrect comment as well. :) — techfoobar, Jun 26 '13 at 14:50

score 5 · Answer 1 · answered Jun 26 '13 at 13:59

5

$(function() {

is actually the shortcut of calling the dom ready handler like:

$(document).ready(function() {

and hence, you need to call it once per page like:

$(function () {
    $(".lbCriterionStep3").click(function () {

        //code
    });
    $(".lbCriterionStep4").click(function () {

        //code
    });
});

For more information read .ready() API documentation

answered Jun 26 '13 at 13:59

palaѕн

72,112
17
116
136

1

good explanation of a common misconception +1. – apollosoftware.org Jun 26 '13 at 14:02
`you need to call it once per page` - why do you say "need"? It's just as valid to call it multiple times. It makes more sense, logically, to group them, but there's no "need" to – Ian Jun 26 '13 at 14:06

score 0 · Answer 2 · edited Jun 26 '13 at 14:03

use $(function(){ }); ready event handler only once and write all other event handler function for html element inside that however your way wil not result in any error but make code huge.

So, use like this

<script type="text/javascript">
    $(function () {

        $(".lbCriterionStep3").click(function () {
            //code
        });

        $(".lbCriterionStep4").click(function () {
            //code
        });
    });
</script>

score 0 · Answer 3 · answered Jun 26 '13 at 14:00

0

or you could just call other functions in your function, so that those will be reusable (u can use them somewhere else too).

answered Jun 26 '13 at 14:00

Ashok Damani

3,896
4
30
48

JQuery function syntax?

3 Answers3