CODEWITHSUNDEEP
javascriptjqueryevent-handlingjquery-events
FazeL
FazeL

Reputation: 986

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

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?

Upvotes: 0

Views: 72

Answers (3)

Max P
Max P

Reputation: 21

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.

Upvotes: 1

Víctor
Víctor

Reputation: 3039

$(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>

Upvotes: 3

Pointy
Pointy

Reputation: 413720

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.

Upvotes: 6

Related Questions