Why we use $(function() { }) like syntax in JS?

Question

When I use this code it bind my $.post() to a form and prevent a page reload for submitting it:

$("#analyze_audio").submit(function (e) {
    debugger;
    e.preventDefault();
    var url = "/analyze_audio";
    var dataToSend = {"analyze_audio": "analyze_audio"};
    var callback = function (data) {
        debugger;
        document.getElementById("audioresponse").innerHTML = (data);
    };
    $.post(url, dataToSend, callback, 'html');
});

But it doesn't trigger the debuggers I used in it, so it doesn't bind the event to my function correctly, but when I use this code fragment, it works perfectly:

$(function() {
    $("#analyze_audio").submit(function (e) {
        debugger;
        e.preventDefault();
        var url = "/analyze_audio";
        var dataToSend = {"analyze_audio": "analyze_audio"};
        var callback = function (data) {
            debugger;
            document.getElementById("audioresponse").innerHTML = (data);
        };
        $.post(url, dataToSend, callback, 'html');
    });
});

I really don't understand why?

Thats because the first is the wrong way, and the second is the right way. Thats all there is to it! — Jamiec
– Jamiec, Commented Sep 7, 2015 at 14:08

Pointy · Accepted Answer · 2015-09-07 14:06:37Z

6

When you're working with jQuery (which you clearly are), wrapping a function in $( ) makes it a function that's called by the library when the "DOM ready" event is received from the browser. It thereby defers execution of your code until the DOM is fully built. That makes your code work because it ensures that the element with id "analyze_audio" is present.

There's nothing syntactically special about $( ) — it's just a simple function call, to a function named $ (which is the main entry point to the jQuery library).

You may see code that does something similar:

$(document).ready(function() { ... });

That does precisely the same thing (and is also a jQuery idiom). There's no reason to use that form unless you enjoy typing in extra characters.

answered Sep 7, 2015 at 14:06

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

Víctor · Accepted Answer · 2015-09-07 14:10:37Z

3

$(function() {}); is just a shortcut for document.ready. It would work the same like this:

<script type="text/javascript">
        $(document).ready(function() {
            $("#analyze_audio").submit(function (e) {
                debugger;
                e.preventDefault();
                var url = "/analyze_audio";
                var dataToSend = {"analyze_audio": "analyze_audio"};
                var callback = function (data) {
                    debugger;
                    document.getElementById("audioresponse").innerHTML = (data);
                };
                $.post(url, dataToSend, callback, 'html');
            });
        });
    </script>

answered Sep 7, 2015 at 14:10

Víctor

3,0393 gold badges31 silver badges44 bronze badges

Comments

Max P · Accepted Answer · 2015-09-07 14:58:55Z

1

When you bind event to the form #analyze_audio it not present in DOM yet. If you put your script after the html with form, then it will work. Or you can use $(document).ready() to add your binding or just $(function(){}) both this functions will be executed when whole page will be loaded.

edited Sep 7, 2015 at 14:58

answered Sep 7, 2015 at 14:16

Max P

216 bronze badges

Collectives™ on Stack Overflow

Why we use $(function() { }) like syntax in JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related