.click()-methode jquery niet helemaal duidelijk

[antonwas]

Beste lezers,

Ik heb het volgende stukje code. Het is afkomstig uit het boek "Learning jQuery 1.3".

   var toggleStyleSwitcher = function(event) {
    if (!$(event.target).is('.button')) {
      $('#switcher .button').toggleClass('hidden');
    }
  };
  $('#switcher').click(toggleStyleSwitcher);

  // Hoe weet .clik() hier wat er uitgevoerd moet worden?
  $('#switcher').click();

Ik heb de vraag al in een commentaar boven de regel gezet waar het om gaat. De voorgaande regel begrijp ik wel. Daar wordt gewoon de functie toggleStyleSwitcher uitgevoerd wanneer er op #switcher geklikt wordt. De regel waar mijn vraag over gaat wordt al direct uitgevoerd wanneer het totale DOM geladen is. (deze code staat ook nog binnen een document.ready() functie, alleen die heb ik hier niet opgenomen)

Kort gezegd komt mijn vraag op het volgende neer:
Wat is in mijn geval het verschil tussen

$('#switcher').click(toggleStyleSwitcher); en $('#switcher').click();

Greetz,

Anton

 

[grumbkow]

De bovenste voert gewoon toggleStyleSwitcher uit zodra er geklikt wordt op het element met ID switcher.
De onderste voert niets uit.

 

[antonwas]

De bovenste voert gewoon toggleStyleSwitcher uit zodra er geklikt wordt op het element met ID switcher.
De onderste voert niets uit.

Ik denk dat de onderste wel iets doet, want wanneer ik hem weghaal, doet de pagina het niet goed meer. Het gaat om het laten zien van enkele div's. Wanneer je de tweede regel weglaat, laat hij alle div's automatisch zien. Voeg je deze regel toe, dan doet hij netjes wat ik wil, namelijk het niet laten zien van die div's.

Het wel/niet laten zien van de div's wordt geregeld door toggleStyleSwitcher. Wanneer je dat als argument meegeeft aan de tweede regel, werkt de pagina ook niet naar behoren. Ook dan worden alle div's direct weergegeven. Ik vind het dus vreemd waarom hij met alleen .click() blijkbaar weet dat hij de functie toggleStyleSwitcher moet uitvoeren.

 

[grumbkow]

Het enige wat je doet is letterlijk zeggen

Als er geklikt wordt op het element met een id genaam switcher...

Wil je er wat mee doen, is het net als de bovenste, een functie aanroepen binnen in de click.
Of een functie schrijven binnen de klik;

$('#switcher').click(function()
{
$(div).hide();//laat alle divs verdwijnen.
});

 

[antonwas]

Het enige wat je doet is letterlijk zeggen

Als er geklikt wordt op het element met een id genaam switcher...

Wil je er wat mee doen, is het net als de bovenste, een functie aanroepen binnen in de click.
Of een functie schrijven binnen de klik;

$('#switcher').click(function()
{
$(div).hide();//laat alle divs verdwijnen.
});

Ik heb nog even goed op het internet gekeken naar verschillende voorbeelden en ben er nu zelf ook uit. Die laatste regel voert inderdaad direct een .click() uit, zonder dat je daar zelf daadwerkelijk voor hoeft te klikken. Aangezien ik eerder al de toggleStyleSwitcher als handler heb toegevoegd aan de event "click" weet jQuery dus wat hij moet uitvoeren. Geweldig!

Iedereen bedankt voor de hulp!

Groetjes,

Anton

 

[grumbkow]

dit is niet correct.

Hij voert geen klik uit, je zegt als er geklikt wordt, doe dan niets... Verder doet ie niets...

 

[antonwas]

Hmmmmmmmmmm,

Beetje vreemd. Is het niet zo dat .click(toggleStyleSwitcher) een verkorte notatie is voor .bind (event, handlerfunctie) Dat betekend dus dat deze niet automatisch wordt uitgevoerd, maar alleen als je daadwerkelijk klikt.

De tweede zou dan automatisch een click moeten simuleren en omdat je voor de event click een handlerfunctie hebt gemaakt (in mijn geval toggleStyleSwitcher) weet hij dus dat hij die code automatisch moet uitvoeren wanneer de pagina geladen is. Nogmaals, mijn codefragment staat ook binnen een .ready() functie, alleen die heb ik hier niet opgenomen.

Ik redeneer dan waarschijnlijk verkeerd, blijft toch de vraag hoe het kan dat er automatisch een .click() wordt uitgevoerd door de tweede regel, zonder dat ik zelf daadwerkelijk klik. Ik heb die regel ook al in commentaar gezet en als ik de pagina dan uitvoer, blijven de div's gewoon zichtbaar, terwijl ze verborgen dienen te worden. Dat wordt toch echt geregeld door die tweede .click() functie???

Boven die tweede regel staat in de broncode de volgende commentaarregel:
// Simulate a click so we start in a collaped state.

SIMULATE, oftewel doe net alsof er geklikt is. Het klopt inderdaad dat er in deze regel niets gebeurd, maar omdat je in de eerste regel via .click(event, handlerfunctie) een functie aan de event "click" hebt gekoppeld wordt deze functie dus uitgevoerd, voor iedere click die plaats vindt.

Dit zijn een beetje mijn gedachten. Misschien dat dit nieuwe aanknopingspunten voor jullie biedt.

 

[grumbkow]

jQuery werkt gewoon op deze manier. de .click() is een event wat je afvangt.

maak dit er eens van.

$('#switcher').click(function()
{
alert('test');
});

Die alert mag NIET tevoorschijn komen zonder te klikken.
is dat wel het geval ligt het in ieder geval NIET aan die regels, maar zit er ergens anders iets in je code te *****n.

 

[grumbkow]

Dat terzijde.
Is het onzin om een regel als $('#switcher').click(); in je code te zetten omdat het niets doet. Sowieso weghalen dus.

 

[antonwas]

Ik ga het een en ander uitproberen.

 

[antonwas]

Je hebt idd gelijk,

De alert wordt alleen uitgevoerd wanneer ik klik op #switcher, niet automatisch. Ik kan mijn mysterieuze code misschien nog wat verder verduidelijken. In het boek staat dat je zoiets als wat er in mijn geval gebeurd kunt bereiken middels de volgende code:

$('#switcher').trigger('click');

Als ik het goed begrijp vuurt deze code wel automatisch een click event af. Ik heb dit geprobeerd en het werkt in mijn geval (de div's zijn in het begin automatisch verborgen)

Dan gaat het boek als volgt verder:

"The .trigger() method provides the same set of shortcuts that .bind() does. When these shortcuts are used with no arguments, the behavior is to trigger the action rather than bind it:

$('#switcher').click();

"

En hier is dus mijn oorspronkelijke mysterieuze code en die werkt ook???

 

[grumbkow]

$('#switcher').click(); dit heeft geen nut, want je voert niets uit op het click event.

Al met al, wat het ook doet. het moet uit je code.

 

[antonwas]

Ik zal als laatste de totale code even posten. Misschien dat je daar iets in kunt vinden wat het veroorzaakt.

$(document).ready(function() {
  // Enable hover effect on the style switcher buttons.
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

  //Allow the style switcher to expand and collapse.
  var toggleStyleSwitcher = function(event) {
    if (!$(event.target).is('.button')) {
      $('#switcher .button').toggleClass('hidden');
    }
  };
  $('#switcher').click(toggleStyleSwitcher);

  // Simulate a click so we start in a collaped state.
  //$('#switcher').click();
  
  $('#switcher').trigger('click');
 
  // The setBodyClass() function changes the page style.
  // The style switcher state is also updated.
  var setBodyClass = function(className) {
    $('body').removeClass();
    $('body').addClass(className);
    $('#switcher .button').removeClass('selected');
    $('#switcher-' + className).addClass('selected');
    
    if (className == 'default') {
      $('#switcher').click(toggleStyleSwitcher);
    }
    else {
      $('#switcher').unbind('click', toggleStyleSwitcher);
      $('#switcher .button').removeClass('hidden');
    }
  };

  // Invoke setBodyClass() when a button is clicked.
  $('#switcher').click(function(event) {
    if ($(event.target).is('.button')) {
      if (event.target.id == 'switcher-default') {
        setBodyClass('default');
      }
      if (event.target.id == 'switcher-narrow') {
        setBodyClass('narrow');
      }
      else if (event.target.id == 'switcher-large') {
        setBodyClass('large');
      }
    }
  });

  // Invoke setBodyClass() when a key is pressed.
  $(document).keyup(function(event) {
    switch (String.fromCharCode(event.keyCode)) {
      case 'D':
        setBodyClass('default');
        break;
      case 'N':
        setBodyClass('narrow');
        break;
      case 'L':
        setBodyClass('large');
        break;
    }
  });
});

Als je niets bijzonders ziet, ga ik wel iets anders verzinnen.

 

[grumbkow]

Ik hoef niet te kijken wat de oorzaak is.
Jij zegt als je die regel weg haalt dat het niet gebeurd.

Ik zeg: Die regel is totale onzin dus die moet sowieso uit je code.
Is dan het probleem niet opgelost?

En als ik me niet vergis simuleert .trigger('click'); een click op #switcher.

 

[antonwas]

Zoiets ja,

Volgens mij vergis je je niet en simuleert .trigger() idd een click op #switcher.

Ik zet de vraag op opgelost en we praten er niet meer over. In ieder geval voor de tijd om het mij uit te leggen!!

Anton

 

[grumbkow]

Zoiets ja,

Volgens mij vergis je je niet en simuleert .trigger() idd een click op #switcher.

Ik zet de vraag op opgelost en we praten er niet meer over. In ieder geval voor de tijd om het mij uit te leggen!!

Anton

Haha prima!

En geen probleem, daar zijn we hier voor =)