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

robyspider77 · 2022-08-03T09:32:44+0200

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 · 2022-08-04T01:46:51+0200

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 · 2022-08-04T08:41:22+0200

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 · 2022-08-04T12:53:47+0200

robyspider77 ha scritto:
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.

robyspider77 · 2022-08-04T14:06:26+0200

robyspider77 ha scritto:

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

robyspider77 · 2022-08-04T14:07:03+0200

ottimo, adesso funziona.. grazie 1000 sei stato molto utile! e studierò

Cerca

Cerca

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

robyspider77

Nuovo Utente

WmbertSea

Moderatore

robyspider77

Nuovo Utente

WmbertSea

Moderatore

robyspider77

Nuovo Utente

robyspider77

Nuovo Utente

Discussioni simili