JQuery: Deferred loading of JQuery and '$ not defined'

Wrap it inside window.onload, so the script will only be executed when everything is fully loaded.

Try this example:

window.onload = function () {
    $("#city").click(function() {
        alert('city');
    });
    $("#doctor").click(function() {
        alert('doctor');
    });
}

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

<button id="city">City</button>
<button id="doctor">Doctor</button>

Explanation about window.onload from MDN:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links, and sub-frames have finished loading.

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

For more idiomatic (in jquery) way, use the code below. it's the same with window.onload.

$(document).ready(function() {
    // put code here
});

Another alternative, use $(function() { }).

$(function() {
    // put code here
})