How to set priority for DOM ready blocks?

Question

I want to start getting user location if his/her settiings is active. So I check if user setting allows using GPS then I check the allow checkbox using jquery prop.

$(document).ready(function(){
  //using javascript I check if map settings is active then:
  enableGPS();
})

function enableGPS(){
  $(".activateGPS").prop( "checked", true );
}

Uising jquery prop I expect the code below to listen and response to changes but it seems not working. Is it because both above and below codes are wrapped inside DOM ready?

How can I pospone the block below to be ready for listening after the blocks above?

$(document).ready(function(){
    $('.activateGPS').change(function() {
        //Do something with coordinates
    })
})

Finally I have to say this is a sample code. Please do not merge the third block into the second block. I want to know how to handle DOM ready blocks proiroties.

Answer 1

You have 2 stages for DOM loading in js DOMContentLoaded (in jQuery jQuery.ready) and window.onload

The DOMContentLoaded event happens on the document object be for the page was loaded. for example:

 document.addEventListener("DOMContentLoaded", ready);

With window.onload event on the window object triggers when the whole page is loaded including styles, images and other resources.

How can I pospone the block below to be ready for listening after the blocks above?

You can listen to the event of the first block the listen to the second and then the third

$('#firstBlock').change(function(){
    // do your stuff..
    $('#secondBlock').change(function(){
        // do your stuff..
        $('#thirdBlock').change(function(){
            // do your stuff..
        });
    });
});