Placement of jQuery function that toggles p tags

Question

I have a page with lots of jquery. There are lots of functions inside:

$( document ).ready(function() {
//lots of functions
});

After that "document ready" snippet closes, I have a function written like this:

$(function(){
        $('#number-of-coins input[type=radio]').change(function () {
            var numcoins=$("input[name=numbercoins]:checked").val();
            if (numcoins == "2") {
                $( "p.two" ).show();
                $( "p.three" ).hide();
            } else if (numcoins == "3") {
                $( "p.two" ).hide();
                $( "p.three" ).show();
            } else {
                $( "p.two" ).hide();
                $( "p.three" ).hide();
            }
        });
    });

What this does is not important, but it does work properly. My question is, would it be more efficient to take this section below (without the "function" wrapper) and move it into the "document ready" snippet? Or does it not matter either way? I did that as a test and it worked, so it would seem to me that every function should just go inside of the "document ready" snippet, since it's slightly less code not having to write the function wrapper each time. Is that accurate or does it depend?

 $('#number-of-coins input[type=radio]').change(function () {
            var numcoins=$("input[name=numbercoins]:checked").val();
            if (numcoins == "2") {
                $( "p.two" ).show();
                $( "p.three" ).hide();
            } else if (numcoins == "3") {
                $( "p.two" ).hide();
                $( "p.three" ).show();
            } else {
                $( "p.two" ).hide();
                $( "p.three" ).hide();
            }
        });

Answer 1

Putting a function inside the jQuery function $(function(){}) is shorthand for $(document).ready(), they are the same thing.

So, the answer is: yes, it will be more efficient.

jQuery's .ready method just waits for the DOM to be ready before firing the code inside but when it comes to setting event handlers, you actually don't have to wait for the DOM to be ready at all. jQuery allows you to attach your events to the document object itself and when those events bubble up, jQuery will call them.

So instead of using

$('#number-of-coins input[type=radio]').change(function () { ... });

You can use

$(document).on("change", '#number-of-coins input[type=radio]', function(){...});

The second one does effectively the samething as the first one, but the first one needs to be inside of a $(function(){..}) or $(document).ready() and the second one does not.

For more info, see Difference between .on('click') vs .click().

Answer 2

First of all, the:

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

And I think you should always use the form $(function(){}).

As the official jQuery say the second is a shorthand of the first one.

Now about your question.

I think you should avoid to use too many $(function(){}), as each is a new event handler.

If it is easy for you to do, as you mean in the OP, you should have just one.

But it's not correct that you should put your functions inside.

What you should do inside a $(function(){}) is put the code that need to be executed when the DOM is ready.

So, for example, the events binding is a proper staff that have to be placed in such function.

But the function definition not need to be there.

In my opinion you should have all your functions, even the event handler functions, placed in proper files/modules loaded in the header part of the HTML document.

Than, a file with the $(function(){}) that contains all the binding that need to be done when the document is ready.

In your particular case:

event-handlers.js

(function(window){

    const MyEventHandlers = {};

    function function numberOfCoinsChangeHandler() {
        var numcoins=$("input[name=numbercoins]:checked").val();
        if (numcoins == "2") {
            $( "p.two" ).show();
            $( "p.three" ).hide();
        } else if (numcoins == "3") {
            $( "p.two" ).hide();
            $( "p.three" ).show();
        } else {
            $( "p.two" ).hide();
            $( "p.three" ).hide();
        }
    }

    MyEventHandlers.numberOfCoinsChangeHandler = numberOfCoinsChangeHandler;

    window.MyEventHandlers = MyEventHandlers;
})(window) 

Than you have:

main.js

$(function () {

    $('#number-of-coins input[type=radio]').change(MyEventHandlers.numberOfCoinsChangeHandler);
 });

And then:

index.html

<head>
 ...
 <script src="event-handlers.js"></sctipt>
 ...
 <script src="main.js"></sctipt>
 ...
</head>