JQuery: Laden von JQuery Latente und ‚$ nicht definiert‘

Ich kann nicht meinen Kopf wickeln, um dieses Problem und das großen Angebot an Informationen, die ich im Netz gefunden:

Auf meinem Projekt wird die JQuery geladen mit „verschieben“ . Dies kann ich aufgrund von Projektstandards nicht ändern.

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

Jetzt muss ich auf eine Seite einige kleine Funktionen hinzufügen (derzeit inline):

Mit diesem Setup versucht der Browser, um das Inline-Scrip vor jQuery Lasten => „Nicht abgefangene Reference auszuführen: $ ist nicht definiert "

<body> 
... 
... 
<script> 
    $("#city").change(function() {...some stuff...}; 
    $("#doctor").change(function() {...some stuff...}; 
</script> 
</body>

Was ist der kluge Weg, dies zu lösen?

Quelle

2016-08-29 caliph

haben das Skript einen Rückruf durchführen, die eine IIFE aktiviert, das die Javascript ausführt? – Roberrrt

Fügen Sie einen normalen Onload-Callback hinzu? Siehe http://stackoverflow.com/questions/27300058/window-onload-vs-script-defer – kennytm

Ich habe versucht, alles in ein window.onload = function() {...} zu wickeln, aber dies lähmt die $ (Selektor) .change() Funktionen .. (Ich verstehe nicht, warum ..) – caliph

wrap es innerhalb window.onload, so dass das Skript ausgeführt wird, wenn alles vollständig geladen ist.

window.onload = function() { 
    $("#city").change(function() { /* ...some stuff... */ }); 
    $("#doctor").change(function() { /* ...some stuff... */ }); 
}

Erklärung über window.onload von 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

Versuchen Sie dieses Beispiel:

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

<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>

Quelle

2016-08-29 12:46:56 nvl

Above Antwort ist auch richtig, aber Sie können auch diese versuchen diese Geige demo

$(function() { 
 
\t $("#city").click(function() { 
 
\t \t alert('city'); 
 
\t }); 
 
\t $("#doctor").click(function() { 
 
\t \t alert('doctor'); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<button id="city"> 
 
    City</button> 
 
<button id="doctor">Doctor</button>

Quelle

2016-08-29 12:49:02

downvoted, da '$' wird undefiniert. –

Wenn es eine jquery-Referenz gibt, funktioniert die $ (function()) als Fenster onload. –

Das Problem ist, dass aufgrund des Defer-Attributs jQuery möglicherweise nicht geladen wird, wenn Ihr Code ausgeführt wird. Und wenn es nicht geladen ist, wird '$' nicht definiert. –

Pros können überprüfen: Mit diesem Ansatz Sie müssen nicht für die warten 'load' Ereignis auszulösen. Dies sollte ausgeführt werden sobald jQuery das Laden beendet hat.

var initInterval = setInterval(function(){ 
 
     if(window.jQuery) { 
 
      clearInterval(initInterval); 
 
      init(); // where init is the entry point for your code execution 
 
     } 
 
    }, 20); 
 

 

 
function init(){ 
 
    $('#example').text('Ahoy!'); 
 
}

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

 
<div id="example">Hi</div>

Quelle

2016-08-29 12:50:25

, warum downvote. Gründe dafür? –

funktioniert nicht .... –

jetzt funktioniert –

JQuery: Laden von JQuery Latente und ‚$ nicht definiert‘

Antwort

Verwandte Themen