Kan class wel toevoegen maar daarna met body click niet verwijderen. Waarom gaat dit niet?

[tab]"Beste fietsenmaker, hier is mijn fiets. Hij werkt niet. Ik ga er vanuit dat het morgen is opgelost. Fijne dag verder en tot morgen![/tab]
Denk je dat de fietsenmaker nu enig idee heeft wat ie moet doen? Ik denk het niet...

Verander nu die fietsenmaker eens in ons en de fiets in jouw code. Je titel "Waarom werkt dit niet" zegt niet echt veel en vervolgens toon je alleen code. Wat wil je bereiken? Wat gebeurd in de plaats van dat? Wat heb je gedaan om het op te lossen? Waar denk jij dat het aan ligt?

Heb de titel aangepast zat zo lang op mijn scriptje te ergere dat ik vergat een goede title met beschrijving te geven. Had het geen wat ik wilde al op zoveel manieren gedaan het wilde niet lukken vandaar op de duur beetje in de stres. Dit sitje code is natuurlijk maar een deeltje van het grote geheel.

Voeg eens een ready() toe aan je body.
Tenslotte, wanneer de functie in je browser wordt geladen, bestaat body.overlay nog niet.

Wat een mogelijk oplossing is: bij een onclick('body') kijken of hij de class overlay heeft. Zo ja: verwijderen. Zo nee: toevoegen.

Eddy E op 19/08/2015 20:00:41

Voeg eens een ready() toe aan je body.
Tenslotte, wanneer de functie in je browser wordt geladen, bestaat body.overlay nog niet.

Wat een mogelijk oplossing is: bij een onclick('body') kijken of hij de class overlay heeft. Zo ja: verwijderen. Zo nee: toevoegen.

$(function()

is gelijk aan

$(document).ready()

of is dit niet wat je bedoelt?

    <script>
    $( function() {
      $( "button" ).on( "click", function(e) {
		  e.stopPropagation();
        $("body").addClass( "overlay" ).html('Hoppa, class toegevoegd!');
      });
      $( "body, html" ).on( "click", function() {
        $("body").removeClass( "overlay" ).html('En weg is mijn class!');
      });
    });
    </script>

Edit: Dit is maar eenmalig, dus als je dit herhaaldelijk wilt doen, moet je dus inderdaad dat degene doen wat Eddy al voorstelt.

DavY Blaat op 19/08/2015 20:08:13

    <script>
    $( function() {
      $( "button" ).on( "click", function(e) {
		  e.stopPropagation();
        $("body").addClass( "overlay" ).html('Hoppa, class toegevoegd!');
      });
      $( "body, html" ).on( "click", function() {
        $("body").removeClass( "overlay" ).html('En weg is mijn class!');
      });
    });
    </script>

Ja mooi dit werk alleen kun je me uitleggen waarom dit met

$( "body, html" ).on(...

wel werkt en

$( "body" ).on(...

niet? Ik wil het begrijpen.

[size=xsmall]Toevoeging op 19/08/2015 20:19:53:[/size]

Ik zie dat

 $( "body" ).on(...

maar

 $( "html" ).on(... 

wel. Vaag waarom is er op de body niet te klikken?

 
   <script>
    $( function() {
      $( "button" ).on( "click", function() {
		  if($("body.overlay").length) {
			$("body").removeClass( "overlay" );
		  } else {
			$("body").addClass( "overlay" ); 
		  }
      });
    });
    </script>

Zo kun je blijven klikken op je button. Waarom dat niet werkt, kun je zelf ook wel googlen he. leer je immers meer van.

Twee punten:

- waarom zou je de overlay class aan je body hangen - zou het niet veel praktischer zijn als je een divje aan je DOM toevoegt waar je voorgenoemde class aanhangt, of je zorgt dat deze div al in je pagina zit met display: none;

- hoe zie je overlay class er uit, en wat voor andere typen elementen bevinden zich normaal op je pagina's (waar je deze overlay overheen zet als dat de bedoeling is want dat wordt niet eens duidelijk uit je verhaal), lijkt mij niet heel onbelangrijk voor de beantwoording van je vraag

Ik heb nu nog alle in aparte div's maar wil dit anders omdat dit voor een plugin word voor een verschillende menus. Ik zet de overlay niet gelijk in de body maar body.overlay:after en ik wil het in de body tag omdat ik daar nog meer classen in zet voor deze plugin en ze zo overzichtelijk houd daar.

body.overlay:after {
content: "";
display: block;
overflow: hidden;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
}

[size=xsmall]Toevoeging op 19/08/2015 21:03:43:[/size]

Bedankt allemaal voor de tips en opmerkingen.