Perché questa funzione di clic jQuery non funziona?

116

Codice:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

Il codice sopra non funziona. Quando clicco su #clicker, non avvisa e non si nasconde. Ho controllato la console e non ho ricevuto errori. Ho anche controllato per vedere se JQuery stava caricando e in effetti lo è. Quindi non sono sicuro di quale sia il problema. Ho anche eseguito una funzione di documento pronto con un avviso e ha funzionato quindi non sono sicuro di cosa sto facendo di sbagliato. Per favore aiuto. Grazie!

— starbucks
fonte

3

Avvolgi il codice in document.ready

— karthikr

1

hai controllato la console del browser se ci sono errori, sintassi o file non trovato o qualcos'altro?

— Siddharth Pandey

1

Possibile duplicato di Perché jQuery o un metodo DOM come getElementById non trova l'elemento?

— user4642212

180

Dovresti aggiungere il codice javascript in un $(document).ready(function() {});blocco.

vale a dire

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Come afferma la documentazione di jQuery : "Una pagina non può essere manipolata in modo sicuro finché il documento non è" pronto ". JQuery rileva questo stato di preparazione per te. Il codice incluso all'interno $( document ).ready()verrà eseguito solo quando la pagina Document Object Model (DOM) è pronta per JavaScript codice da eseguire "

— mobius
fonte

7

Che stupido da parte mia !! Ancora imparando. Ho pensato che la funzione clic non ne avesse bisogno poiché è attivata facendo clic rispetto al documento. Già dove si carica al caricamento della pagina.

— Starbucks

7

@starbucks Non preoccuparti troppo, tutti commettono errori, soprattutto quando imparano :)

— mobius

4

La funzione documento pronto imposta i listener in base a ciò che trova nella pagina. Se non lo fai, non vengono mai configurati. Il modo migliore per farlo, tuttavia, è delegarli con la funzione "on ()", invece. In questo modo tutti gli elementi aggiunti alla pagina dopo il caricamento continueranno a funzionare!

— Sean Kendle

1

Inoltre, con la funzione "on", non è effettivamente necessario utilizzare la funzione documento pronto. Imposta l'ascoltatore a livello di documento, quindi raschia la pagina per consentire agli elementi di ascoltare. Ecco perché è un po 'più veloce essere un po' più specifico sul tipo di elemento che si desidera ascoltare, come "div.listentome" invece di ".listentome". Invece di controllare ogni elemento per la classe "listentome", controlla solo i div, in questo esempio.

— Sean Kendle

2

@SeanKendle - Non è così che .on()funziona. Puoi (facoltativamente) usarlo per creare gestori delegati, ma in entrambi i casi non "raschia la pagina", ma lega un ascoltatore agli elementi specifici nell'oggetto jQuery su cui lo chiami.

— nnnnnn

65

Ho trovato la soluzione migliore per questo problema utilizzando ON con $ (documento).

 $(document).on('click', '#yourid', function() { alert("hello"); });

per id inizia con vedi sotto:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

finalmente dopo 1 settimana non ho bisogno di aggiungere triger onclick. Spero che questo possa aiutare molte persone

— user5636597
fonte

2

Ah grazie, quanto sopra non ha funzionato per me, ma questo ha funzionato! (probabilmente qualche strana interazione con angular e routing)

— Flink

Proprio come Flink, ho anche risolto il problema con questo. Grazie .. 100 voti positivi ..

— Zeta

3

Si chiama delega ed è necessaria per i contenuti inseriti o spostati dinamicamente

— mplungjan

Questo ha funzionato per me! Grazie :)

— Amrit Pal Singh

20

Il tuo codice potrebbe funzionare senza document.ready (), assicurati solo che lo script sia dopo il #clicker. Dai un'occhiata a questa demo: http://jsbin.com/aPAsaZo/1/

L'idea nel concetto pronto. Se sei sicuro che il tuo script è l'ultima cosa nella tua pagina o è dopo l'elemento interessato, funzionerà.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Avviso: injsbindemo sostituisci httpcon httpslì nel codice, o usa questa variante Demo

— SaidbakR
fonte

11

+1 - La tua risposta spiega perché è necessaria la document.ready()funzione.

— Kevin

1

Questa è una risposta migliore perché il suggerimento che lo script jquery deve essere all'interno di una funzione 'document.ready ()' è fuorviante. Sì, è più sicuro lì, ma se imposti l'elemento html per una funzione jquery al volo (come interrogare una riga della tabella a seconda di quale pulsante viene cliccato), deve essere fuori / dopo quella funzione. Ho erroneamente cambiato il nome del div di destinazione per le mie sovrapposizioni pop-up e poi ho passato diverse ore frustranti alla ricerca di un errore di script. Grande lezione imparata.

— johnlholden

Questa è una risposta sbagliata, perché il codice JS dovrebbe essere nell'header del DOM e non inline. Il fatto che tu abbia passato diverse ore a cercare l'errore di script non è un problema JS, è un tuo problema non leggere correttamente i documenti e non sapere come utilizzare gli strumenti di debug.

— Andrey Shipilov

@AndreyShipilov Chi l'ha detto, guarda la fonte di questa pagina e vai in fondo, vedrai il codice javascript lì.

— SaidbakR

1

@AndreyShipilov - fare si sa come utilizzare gli strumenti di debug per risolvere questo problema? Allora condividi la tua conoscenza con gli altri invece di offenderli. Cerca di essere costruttivo ed equo.

— Matt

6

Devi avvolgere il tuo codice Javascript con $(document).ready(function(){});Look this JSfiddle .

Codice JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

— Pecora nera
fonte

5

Prova ad aggiungere $(document).ready(function(){all'inizio del tuo script e poi });. Inoltre, divl'ID contiene correttamente, cioè come ID, non come classe, ecc.?

— tjons
fonte

3

Assicurati che non ci sia nulla sul tuo pulsante (come un div o un'immagine trasparente) che impedisce di fare clic sul pulsante. Sembra stupido, ma a volte pensiamo che jQuery non funzioni e tutto il resto e il problema è nel posizionamento degli elementi DOM.

— vicgilbcn
fonte

o, ad esempio, z-index!

— un darren

3

Puoi usare $(function(){ // code });che viene eseguito quando il documento è pronto per eseguire il codice all'interno di quel blocco.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— Rakyesh Kadadas
fonte

2

Solo un rapido controllo, se stai usando un motore di templating lato client come il manubrio, il tuo js verrà caricato dopo document.ready, quindi non ci sarà alcun elemento a cui associare l'evento, quindi usa il gestore onclick o usalo sul corpo e controlla l'obiettivo corrente

— Abhinav Singh
fonte

così vero, sto usando flask / jinja e non funziona a meno che non utilizzo la proprietà onclick nell'HTML e da lì faccia riferimento a una funzione nel mio <script>

— Rich Stone