[js] Jquery selector - not() werkt niet

[radem205]

Hey,

Ik gebruik onderstaande code om een div weer te geven en wanneer er buiten de div wordt geklikt weer te sluiten. Alleen lukt het mij niet om de div correct te sluiten wanneer er buiten de div wordt geklikt.

JavaScript:

$('document').ready(function(){
    
    $('.options').click(function(){
        
        var pos = $(this).offset();
        var posX = pos.left;
        var posY = pos.top + $(this).height();
                
        $('#optionsBox').css({'left':posX+'px','top':posY + 'px'});
        $('#optionsBox').slideDown('fast');
        
    }); 
    
    $(document).not('.options, #optionsBox').click(function() {
        $('#optionsBox').slideUp('fast'); 
    });
    
});

Het lijkt er op dat de not() functie niet werkt. Hiermee kan je elementen uitsluiten van de klikfunctie. De div wordt getoond wanneer ik op ".options" klik, maar verdwijnt direct daarna weer.

Weet iemand wat hier aan de hand is, want volgens mij moet dit gewoon werken

[Bosmonster]

not() is een filter functie. Aangezien je met $(document) alleen het document element selecteert valt er weinig te filteren

Verder snap ik niet zo goed wat je ermee wilt bereiken. Lijkt me sterk dat je _alle_ elementen van die click wilt voorzien.

[ Voor 33% gewijzigd door Bosmonster op 20-11-2009 13:08 ]

[radem205]

Maar als ik $('body') gebruik dan werkt het ook niet. En hij filtert dan toch alles wat binnen het document / body aanwezig is? Waarom zou dat niet kunnen werken dan?

Wat ik wil bereiken is dat wanneer men buiten de div (optionsBox) klikt dat dan de div weer verdwijnt, that's all

[ Voor 26% gewijzigd door radem205 op 20-11-2009 13:10 ]

[Bosmonster]

radem205 schreef op vrijdag 20 november 2009 @ 13:08:
Maar als ik $('body') gebruik dan werkt het ook niet. En hij filtert dan toch alles wat binnen het document / body aanwezig is? Waarom zou dat niet kunnen werken dan?

Nee hij filtert het resultaat van je query en het resultaat van je query is dan alleen het body-element, niet alles eronder.

Wat jij bedoelt is $('body *').not(...), maar dat lijkt me niet zo heel efficient

Ik zou niet die click aan _alle_ elementen toevoegen, maar juist gewoon aan document of body. Scheelt waarschijnlijk vele honderden events om te koppelen

[ Voor 24% gewijzigd door Bosmonster op 20-11-2009 13:13 ]

[radem205]

Bedankt voor je reacties! Maar als ik het dus bind aan het document ($('document')), op welke manier kan ik dan de div (optionsBox) en de link (options) uitsluiten van dit event?

Ik heb het opgelost met een bind functie:

JavaScript:

$(document).bind('click', function(e) {

                var $clicked=$(e.target); // get the element clicked

                if( ! ( $clicked.is('.options, #optionsBox') || $clicked.parents().is('.options, #optionsBox') ) )
                {
                        $('#optionsBox').hide();
                }

        }); 

[ Voor 52% gewijzigd door radem205 op 20-11-2009 13:18 ]

[Bosmonster]

Je kunt het ook oplossen door de event propagation te stoppen bij de click op de box zelf, dat is wederom efficienter. (gewoon return false dus bij jQuery)

[R4gnax]

Bosmonster schreef op vrijdag 20 november 2009 @ 13:54:
Je kunt het ook oplossen door de event propagation te stoppen bij de click op de box zelf, dat is wederom efficienter. (gewoon return false dus bij jQuery)

Je bedoelt event.stopPropagation(), denk ik.

[radem205]

Bosmonster schreef op vrijdag 20 november 2009 @ 13:54:
Je kunt het ook oplossen door de event propagation te stoppen bij de click op de box zelf, dat is wederom efficienter. (gewoon return false dus bij jQuery)

Hmm, heb op google gezocht naar propagation , maar ik kan er niet echt wijs uit worden wat het nou precies doet. Kan ik de propagation gebruiken in plaats van de gehele $(document).bind... code?

[Bosmonster]

R4gnax schreef op vrijdag 20 november 2009 @ 14:12:
[...]

Je bedoelt event.stopPropagation(), denk ik.

return false doet precies dat in jQuery (simplicity ftw)

radem205 schreef op vrijdag 20 november 2009 @ 14:14:
[...]


Hmm, heb op google gezocht naar propagation , maar ik kan er niet echt wijs uit worden wat het nou precies doet. Kan ik de propagation gebruiken in plaats van de gehele $(document).bind... code?

Normaliter 'bubbelt' een event (zoals een klik) door van element naar element als die op elkaar liggen. Als je dus een klik op je box hebt en een klik op het document, zullen deze beiden uitgevoerd worden, tenzij je deze event-bubbling (propagation) stopt.

Je kunt dus het klik-event op het document mikken die dat ding sluit, zolang je de bubbling maar stopt bij de klik op options van je control. Dit kan expliciet met een e.stopPropagation(), maar dus ook gewoon met een return false, wat het zelfde doet, bij je click van de options.

Dit:

JavaScript:

if( ! ( $clicked.is('.options, #optionsBox') || $clicked.parents().is('.options, #optionsBox') ) 

kun je dus helemaal weglaten (wel zo efficient, aangezien die dat voor iedere klik gaat checken), als je simpelweg een return false toevoegt in je $('.options').click(...).

Voorbeeldje gemaakt:
http://www.bosmonster.nl/html/bubble

[ Voor 82% gewijzigd door Bosmonster op 20-11-2009 14:40 ]

[radem205]

Bosmonster schreef op vrijdag 20 november 2009 @ 14:27:
[...]


return false doet precies dat in jQuery (simplicity ftw)

Wat propagation doet is toch de actie binnen de child niet uitvoeren (kort gezegd). Maar dit heeft dan toch weinig te maken met de click event die er voor moet zorgen dat wanneer je buiten de div klikt de div sluit? Ik zie namelijk de relatie niet helemaal.

[ Voor 4% gewijzigd door radem205 op 20-11-2009 14:30 ]

[radem205]

Bosmonster schreef op vrijdag 20 november 2009 @ 14:27:
[...]


return false doet precies dat in jQuery (simplicity ftw)


[...]


Normaliter 'bubbelt' een event (zoals een klik) door van element naar element als die op elkaar liggen. Als je dus een klik op je box hebt en een klik op het document, zullen deze beiden uitgevoerd worden, tenzij je deze event-bubbling (propagation) stopt.

Je kunt dus het klik-event op het document mikken die dat ding sluit, zolang je de bubbling maar stopt bij de klik op options van je control. Dit kan expliciet met een e.stopPropagation(), maar dus ook gewoon met een return false, wat het zelfde doet, bij je click van de options.

Dit:

JavaScript:

if( ! ( $clicked.is('.options, #optionsBox') || $clicked.parents().is('.options, #optionsBox') ) 

kun je dus helemaal weglaten (wel zo efficient, aangezien die dat voor iedere klik gaat checken), als je simpelweg een return false toevoegt in je $('.options').click(...).

Voorbeeldje gemaakt:
http://www.bosmonster.nl/html/bubble

Bedankt voor je voorbeeld, en het werkt! Alleen heb ik in de div een aantal links, die door de return false; niet meer klikbaar zijn

[R4gnax]

Bosmonster schreef op vrijdag 20 november 2009 @ 14:27:
return false doet precies dat in jQuery (simplicity ftw)

Simplicity ftw, inderdaad. Alleen is er in de jquery mailing lists al diverse malen gesproken over het veranderen van die functionaliteit zodat programmatisch getriggerede events alle mogelijke waarden kunnen retourneren, incl. de boolean waarde ' false'.

Met het oog daarop is het wijzer om jezelf aan te leren event.stopPropagation() te gebruiken. Snij je jezelf zeker niet in de vingers m.b.t. forward compatibility.