Placement of jQuery function that toggles p tags 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();
            }
        });
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().