jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax

robyspider77

Nuovo Utente
3 Ago 2022
7
0
1
Buongiorno a tutti
scusate la domanda forse banale.
ho una pagina php con che fa riferimento ad un file .js
all'interno di questo file c'è una funzione che sulla base di un'evento mi cambia il background-color css di una classe di elementi
Nella pagina principale la funzione va perfettamente, nella pagina di chamata ajax (nonostante sia richiamato lo stesso il file .js) la funzione non va
grazie a chi mi vorrà rispondere
Roberto
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
320
54
28
Ciao Roberto e benarrivato, il problema potrebbe dipendere da diversi fattori. Bisogna capire se gli elementi sono esistenti sulla pagina al momento in cui vengono selezionati tramite javascript/jquery, e verificare se e come viene applicato il css.

Senza ulteriori dettagli e senza vedere la pagina in azione si possono solo azzardare delle ipotesi ma è pressoché impossibile risalire alle cause del problema e capire come poter intervenire per risolverlo.

Se ti è possibile, posta un link della pagina in questione
 

robyspider77

Nuovo Utente
3 Ago 2022
7
0
1
grazie per la risposta, provo a inserire il codice

questo è lo script:

Codice:
$(document).ready(function(){
      $(".fasciaoraria").click(function(){
    
        $(".fasciaoraria").css("background-color", "red");
        $(this).css("background-color", "red");
        
        
        
       });
});

questo è il CSS

Codice:
.fasciaoraria{ position: relative; background-color:slategrey; border:1px solid gainsboro;font-size:17px; color:yellow;}

e questa è la pagina di chiamata AJAX

Codice:
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="calendario.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
</head>
<body>
<div class='orari' >Orari del giorno 
<div class= 'fasciaoraria' id= 'f89'><br>08:00-09:00</div><div class= 'fasciaoraria' id= 'f910'>09:00-10:00</div><div class= 'fasciaoraria' id= 'f1011'>
10:00-11:00</div><div class='fasciaoraria'id= 'f1112'>11:00-12:00</div><div class= 'fasciaoraria' id= 'f1213'>12:00-13:00</div><div class= 'fasciaoraria' id= 'f1314'>13:00-14:00</div><div class= 'fasciaoraria' id= 'f1415'>14:00-15:00</div><div class= 'fasciaoraria' id= 'f1516'>15:00-16:00</div><div class= 'fasciaoraria' id= 'f1617'>16:00-17:00</div><div class= 'fasciaoraria'id= 'f1718'>17:00-18:00</div>
<div class= 'fasciaoraria' id= 'f1819'>18:00-19:00</div><div class= 'fasciaoraria' id= 'f1920'>19:00-20:00</div></div>
</body>
</html>

grazie ancora
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
320
54
28
e questa è la pagina di chiamata AJAX
Non vedo dove stai effettuando la chiamata ajax, per cui posso solo fare delle ipotesi.

Suppongo che gli elementi "fasciaoraria" non esistano ancora sulla pagina nel momento in cui stai applicandogli l'evento click.

In questo caso è possibile risolvere usando la delegazione dell'evento.
Anziché impostare l'evento in questo modo:
Codice:
$(".fasciaoraria").click(function(){...});
prova così:
Codice:
$(document).on("click", ".fasciaoraria", function(){...});

Fai sapere se si risolve. In tal caso ti invito a fare qualche ricerca sull'argomento "delegazione degli eventi jquery", per capire meglio come funziona e quando è necessaria usarla.
 
  • Like
Reactions: robyspider77

robyspider77

Nuovo Utente
3 Ago 2022
7
0
1
grazie per la risposta, provo a inserire il codice

questo è lo script:

Codice:
$(document).ready(function(){
      $(".fasciaoraria").click(function(){
  
        $(".fasciaoraria").css("background-color", "red");
        $(this).css("background-color", "red");
      
      
      
       });
});

questo è il CSS

Codice:
.fasciaoraria{ position: relative; background-color:slategrey; border:1px solid gainsboro;font-size:17px; color:yellow;}

e questa è la pagina di chiamata AJAX

Codice:
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="calendario.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
</head>
<body>
<div class='orari' >Orari del giorno
<div class= 'fasciaoraria' id= 'f89'><br>08:00-09:00</div><div class= 'fasciaoraria' id= 'f910'>09:00-10:00</div><div class= 'fasciaoraria' id= 'f1011'>
10:00-11:00</div><div class='fasciaoraria'id= 'f1112'>11:00-12:00</div><div class= 'fasciaoraria' id= 'f1213'>12:00-13:00</div><div class= 'fasciaoraria' id= 'f1314'>13:00-14:00</div><div class= 'fasciaoraria' id= 'f1415'>14:00-15:00</div><div class= 'fasciaoraria' id= 'f1516'>15:00-16:00</div><div class= 'fasciaoraria' id= 'f1617'>16:00-17:00</div><div class= 'fasciaoraria'id= 'f1718'>17:00-18:00</div>
<div class= 'fasciaoraria' id= 'f1819'>18:00-19:00</div><div class= 'fasciaoraria' id= 'f1920'>19:00-20:00</div></div>
</body>
</html>

grazie ancor
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Div che scompare con scroll jquery Javascript 0
Cosina Implementare jQuery nel sito web sia da remoto che da locale jQuery 11
J Pannelli in Jquery che si aprono a seconda del giorno della settimana jQuery 4
C Autocomplete jquery che non filtra! PHP 0
S [JQUERY] immagine che resta attiva all'hover jQuery 4
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9

Discussioni simili