[jQuery] .click event op div, maar niet op alle items erin

[Duncank]

Ik heb een website met meerdere items erop die allemaal op dezelfde manier zijn opgebouwd:

HTML:

<div class="item">
  <div class="itemheader">
    <h2>itemtitel</h2>
    <a href="javascript:void(0);" class="wijzig">*icoontje*</a>
    <a href="javascript:void(0);" class="toggle">*icoontje*</a>
  </div>
  <div class="itemcontent">
    tekst etc.
  </div>
</div>

Wanneer ik op de toggle-link klik klapt de itemcontent-div in of uit (dmv .slideToggle(); ).
Maar nu wil ik het zo maken dat wanneer op de itemheader geklikt wordt de content in- en uitklapt. Dat is in eerste instantie natuurlijk eenvoudig door dit te doen:

JavaScript:

$('.itemheader').click(function(){
  $(this).parent().find('itemcontent').slideToggle();
});

(corrigeer me als dit beter kan aub!)

maar ik wil nu zorgen dat wanneer er op de wijzig of toggle link geklikt wordt dit niet gebeurd. Daarvoor dacht ik na $('.itemheader') .not('a.wijzig') toe te voegen. Dat werkt echter niet, terwijl dat volgens mij wel zou moeten. $('.itemheader:not(a.wijzig)') lijkt ook niet te werken.

Waar ga ik mis?

[ Voor 69% gewijzigd door Duncank op 19-03-2011 17:06 ]

[Manuel]

En wat is de vraag precies?

Wil je nu dat als je op .itemheader klikt dat .itemcontent niet triggert?

[ Voor 58% gewijzigd door Manuel op 19-03-2011 16:48 ]

[Duncank]

Manuel schreef op zaterdag 19 maart 2011 @ 16:48:
En wat is de vraag precies?

Wil je nu dat als je op .itemheader klikt dat .itemcontent niet triggert?

Sorry, ik wilde met "tab" een indent in de code maken maar die versprong naar de "verstuur" knop en toen ik op spatie drukte werd mijn bericht geplaatst.

[Manuel]

Duncank schreef op zaterdag 19 maart 2011 @ 16:54:
[...]


Sorry, ik wilde met "tab" een indent in de code maken maar die versprong naar de "verstuur" knop en toen ik op spatie drukte werd mijn bericht geplaatst.

Kun je misschien even code tags toevoegen? Dat leest namelijk een stukje beter.

Is het trouwens niet makkelijker om dit grotendeels met CSS op te lossen?

Cascading Stylesheet:

h2 { width: 94%; }
.wijzig, .toggle { width: aantal px;  }

En dan in jQuery:

JavaScript:

$(".itemheader > h2").click(function() {
    // Je code
});

$(".itemheader > .wijzig").click(function() { }); //etc

Dit lijkt mij een stuk makkelijker toe te passen dan met selectors klooien.

[ Voor 5% gewijzigd door Manuel op 19-03-2011 17:03 ]

[TheNameless]

Volgens mij moet zoiets wel werken:

JavaScript:

$('.itemheader').click(function(e){
    if(!$(e.target).is('a')) {
        $(this).parent().find('itemcontent').slideToggle();
    }
});

.. maar de oplossing hierboven is natuurlijk mooier!

[ Voor 12% gewijzigd door TheNameless op 19-03-2011 17:07 ]

[UltimateB]

Inderdaad het werken met een target en daarop de acties baseren zou goed moeten werken.

[Duncank]

Kijk eens, ik heb de code tags toegevoegd, leest inderdaad beter;)

Manuel, de opzet van de itemheader is iets gecompliceerder als in het voorbeeld dat ik hierboven beschreef, en bijvoorbeeld het titel-element veranderd in een input veld om dit te kunnen wijzigen, dus de css oplossing zou mogelijk zijn, maar wel een hele klus.

De oplossing van TheNameless werkt perfect! Veel beter als het werken met .not(), want dit doet het gewoon

Thanks!

[Bosmonster]

Kijk ook eens naar stopPropagation en consorten, dat is juist bedoeld om event bubbling te managen. Verder zou je als The Nameless z'n oplossing werkt voor jou ook eens kunnen kijken naar event delegation (delegate).