Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

jquery: toggle slutar fungera efter navigering till ny sida, måste göra F5

1
Skriv svar
Permalänk
Avstängd
●

jquery: toggle slutar fungera efter navigering till ny sida, måste göra F5

Hej,
Det var ett tag sen jag rumlade runt med js och jquery (och jag har aldrig varit nån ninja direkt, snarare trial and error), men idag slängde jag ihop en liten toggle åt en kompis för att visa GDPR vid klick på en div.

$(document).ready(function(){
    $("#gdprtrigger").click(function(){
        $("#gdpr").toggle();
    });
});

Det funkar fint när sidan är nyladdad, men om jag klickar mig till en annan sida på sajten funkar togglen inte längre. Jag måste ladda om sidan för att den ska funka.

Känns som ett nybörjarfel, men vet någn vilket det är?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ifall man klickar sig vidare på hemsidan, laddas den nya sidan om dynamiskt isåfall? Alltså med hjälp av javascript.

Då är problemet att din event listener endast skapas för det första elementet som har id:et #gdprtrigger när sidan laddas. Efter det är DOM:en redo och callbacken i ready-funktionen kommer inte köras när nästa sida hämtas automatiskt.

Det du kan göra är att använda funktionen .on() istället, för den event listenern kommer köras på även nyinlagda element.

https://api.jquery.com/on/

Byt ut koden innanför din ready-callback till det nedanför. Möjligtvis att användandet av id skulle kunna förstöra för dig ifall du råkar få flera element med samma ID, men det vet jag inte eftersom jag inte har sett din HTML och hur elementet skapas. Isåfall får du byta ut det till en class både i kodexemplet nedanför och i din HTML.

$("#gdprtrigger").on("click", function(){
    $("#gdpr").toggle();
});
Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av Tvillingen:

Ifall man klickar sig vidare på hemsidan, laddas den nya sidan om dynamiskt isåfall? Alltså med hjälp av javascript.

Då är problemet att din event listener endast skapas för det första elementet som har id:et #gdprtrigger när sidan laddas. Efter det är DOM:en redo och callbacken i ready-funktionen kommer inte köras när nästa sida hämtas automatiskt.

Det du kan göra är att använda funktionen .on() istället, för den event listenern kommer köras på även nyinlagda element.

https://api.jquery.com/on/

Byt ut koden innanför din ready-callback till det nedanför. Möjligtvis att användandet av id skulle kunna förstöra för dig ifall du råkar få flera element med samma ID, men det vet jag inte eftersom jag inte har sett din HTML och hur elementet skapas. Isåfall får du byta ut det till en class både i kodexemplet nedanför och i din HTML.

$("#gdprtrigger").on("click", function(){
    $("#gdpr").toggle();
});
Gå till inlägget

Så kan det nog vara, det är nåt "gör det enklare att koda wordpress tema"-verktyg (Semplice), vilket bara krånglar till det när man behöver göra nåt utanför ramarna.

Provade din kod men nu funkade inte klicket alls. Mitt fel, strulade till det i frågan, hade kodat med klasser. Men det löste inte problemet, se nästa post nedan.

jQuery(document).ready(function(){
  $("#gdprtrigger").on("click", function(){
    $("#gdpr").toggle();
  });
});

Kanske för att #gdprtrigger är en vanlig <p> ? Måste det vara en <a> eller en <button>? Inga #-konflikter, enda gången på sidan.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av Tvillingen:
Gå till inlägget

Hittade en bloggpost nu när jag visste mer hur jag skulle söka. Detta funkade. Tack!

jQuery(document).ready(function(){
  $("body").on("click", ".gdprtrigger", function(){
    $(".gdpr").toggle();
  });
});
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara