JQuery $(document).ready(function()) won't run twice

Question

I have an external JQuery file that looks something like this

$(document).ready(function() {

    $('#back-button').click(function() {

    $('#action').val('back');
           $('#adminform').submit();
    });
});

and an inline JQuery like this which only loads if the user is logged in

$(document).ready(function() {

    $("div#panel").show();
    $("#toggle a").toggle();
});

The problem is that the inline JQuery won't load because the external JQuery has loaded first. If I comment out the external Jquery file, the inline one works.

I may have other inline JQuery to run also depending if it's required for that page so how can i get multiple instances of JQuery to work?

Answer 1

You can put multiple ready functions. Read this article Jquery Document Ready.

Something is wrong in your code. Open JavaScript console and check for errors. Also try to log if your code is executing.

Answer 2

jQuery will add all the document.ready or $(function(){}) events into the array based on the order it included into the page.

Then executes one by one when the page/document is loaded/ready. So it will always run all the .ready methods you wrote