Perché jQuery click non funziona quando incluso in un file separato

Sono un principiante che apprende jQuery e sviluppo web, quindi questa potrebbe essere una domanda stupida, ma non riesco a trovare una risposta a questo su Google (probabilmente non sono cercando le parole chiave giuste). Ho un semplice file HTML (ad esempio, 'test.html' che carica jQuery, un file javascript esterno (ad esempio 'test.js') che ho scritto e con un pulsante. Ad esempio,Perché jQuery click non funziona quando incluso in un file separato

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="scripts/test.js" type="text/javascript"></script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

in 'test.js', ho:.

$("#my_button").click(function() { 
    alert('test'); 
    return false; 
});

Ma quando clicco sul pulsante, non funziona Tuttavia, quando ho messo cosa c'è in 'test.js' in 'test.html 'Mi piace:

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 
}); 
</script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

Funziona. La prima domanda è: Qualcuno può spiegarmi perché io t funzionerebbe quando inserirò il codice nel file esterno e lo caricherò? È sempre necessario avvolgere il codice jQuery con $(function() {......} perché funzioni?

Idealmente, non voglio codice javascript nel mio modello HTML perché è ovviamente disordinato. Related/seconda domanda è: qual è il modo più pulito/migliore per separare il codice javascript/jQuery come sopra e tuttavia farlo funzionare nel modello HTML previsto?

Grazie per la risposta.

fonte

2013-07-11 user1330974

$ (function() {}) == $ (document) .ready() come negli elementi dom sono stati caricati ed è sicuro collegarli ad ascoltatori. –

* "Qual è il modo più pulito/migliore per separare il codice javascript/jQuery come sopra e tuttavia farlo funzionare nel modello HTML previsto?" * Spostare gli script a destra prima del tag body di chiusura. –

Sì, lo faresti in qualsiasi file a cui stai facendo un collegamento diretto

$(document).ready(function() { 

    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 

});

fonte

2013-07-11 18:01:40 simongus

Grazie. $ (document) .ready (....) è molto più leggibile (facile da capire) di solo $ (function() {..... – user1330974

Il bind evento su jquery richiede che l'oggetto HTML sia già sottoposto a rendering.

Se dici $('#button').click(function(){dosomething()}); È necessario che #button esista già su HTML per funzionare.

Quando si utilizza $(function(){}); Il codice attende di documentare l'evento pronto per eseguire il codice. Quindi, se chiami button.click sul momento sbagliato, non troverà il pulsante e non funzionerà.

fonte

2013-07-11 18:02:18 Guerra

Grazie. Sto leggendo tutti i commenti e apprendo diversi modi di spiegazioni (ma la risposta è la stessa) :) – user1330974

Sposta il tag script di test.js appena sopra il tag di chiusura body (o dopo il tag button). Se chiami lo script prima del pulsante, non è possibile trovare il pulsante con il nome id. Se lo metti dopo il pulsante, funzionerà.

fonte

2015-07-09 16:18:16

Problemi correlati