La funzione jQuery non risponde a ".click" finché non sposto il cursore?

Ho un sito Web con un semplice switcher in stile CSS. Io uso il seguente codice per la funzione che gestisce cliccando i due tasti a tema, avviando l'interruttore dal buio alla luce e viceversa:La funzione jQuery non risponde a ".click" finché non sposto il cursore?

<script> 
    $(function() { 
    $(".light").click(function(){ 
     $("link").attr("href", "css/lightHome.css"); 
     $(".light").attr("disabled", "disabled"); 
     $(".dark").removeAttr("disabled", "disabled") 

    }) 
    $(".dark").click(function(){ 
     $("link").attr("href", "css/home.css"); 
     $(".dark").attr("disabled", "disabled"); 
     $(".light").removeAttr("disabled", "disabled") 
    }) 
}); 
</script>

Tutto su di esso funziona esattamente come voglio, tranne il fatto che quando si fa clic il pulsante, non succede nulla. Ma il secondo sposto la posizione del cursore dopo il clic, quindi l'interruttore si verifica. Non ho la migliore comprensione di jQuery, quindi spero che sia una semplice mancanza di comprensione per quanto riguarda i processi DOM. Forse a che fare con la mancanza di "pronto"?

Ho provato a fare clic e ad attendere alcuni minuti e non succede nulla finché non sposto il cursore.

Il sito web:

http://watsoncn.info

fonte

2015-08-14 Charles Watson

Funziona perfettamente per me in Chrome, FF e IE. Che browser utilizzate? – m0meni

Per me, la prima volta che l'ho provato, è successo come hai descritto tu. Ma da allora in poi, andava bene? Anche dopo aver aggiornato la pagina. –

Quanto tempo hai aspettato dopo il clic? Potrebbe volerci un po 'di tempo nel tuo sistema/browser. – m02ph3u5

Prova questa funzione:

function toggleCss(file, index) { 
    var oldFile = document.getElementsByTagName("link").item(index); 
    var newFile = document.createElement("link"); 
    newFile.setAttribute("rel", "stylesheet"); 
    newFile.setAttribute("type", "text/css"); 
    newFile.setAttribute("href", file); 

    document.getElementsByTagName("head").item(0).replaceChild(newFile, oldFile); 
} 

$(".dark").on("click", function() { 
    toggleCss("css/lightHome.css"); 
    $(".dark").attr("disabled", "disabled"); 
    $(".light").removeAttr("disabled", "disabled"); 
}); 

$(".light").on("click", function() { 
    toggleCss("css/home.css"); 
    $(".light").attr("disabled", "disabled"); 
    $(".dark").removeAttr("disabled", "disabled"); 
});

fonte

2015-08-14 15:32:52 Stanimir

Invece di tutto il passaggio del file CSS, una soluzione alternativa sarebbe quella di avere un singolo file CSS con entrambi gli stili e quindi prefisso tutti i selettori con .theme.dark o .theme.light;

Questo sarebbe abbastanza facile da fare con il nesting in LESS o SASS se li stai usando (se non lo sei, dovresti davvero considerarlo. Non riesco a immaginare di scrivere CSS senza un preprocessore ora), ma potrebbe essere ingombrante in puro CSS.

CSS:

.theme.dark <rest of selectors> { 
    //CSS 
} 

.theme.light <rest of selectors> { 
    //CSS 
}

HTML:

<body class="theme">

e quindi il codice che viene eseguito su clic del pulsante sarebbe

$('body').addClass('dark') 
$('body').removeClass('light')

$('body').addClass('light') 
$('body').removeClass('dark')

fonte

2015-08-14 15:37:28 m0meni

Prova ad aggiungere l'uso non un JavaScript, ma il "trucco checkbox". Il gestore della casella di controllo è impostato per non visualizzarne nessuno, quindi stile lo stile principale e on: seleziona lo stile del gestore come se fosse cliccato. Con questo non è possibile utilizzare JavaScript ma farlo funzionare al 100% senza errori, se hai fatto tutto bene!

È possibile trovare il canale su YouTube DevTips

https://www.youtube.com/user/DevTipsForDesigners

sul suo canale potete trovare il tutorial su come farlo!

fonte

2015-11-02 20:26:12 Godje

La funzione jQuery non risponde a ".click" finché non sposto il cursore?

risposta

Problemi correlati