Autor Zpráva
nethor
Profil
Zdravím,

mám dlouhý formulář, z toho důvodu chci momentálně nepoužívané položky zabalit.
Používám JQuery.
Clickem na ".BlockEditBoxHead" se rozbaluje / zabaluje následující ".BlockEditBoxBody".

Navíc je v ".BlockEditBoxHead" checkbox, který řeší auto-rozbalování zatržených (Přidá ".Unwrap" pomocé PHP).

Vše funguje až na jednu kosmetickou vadu: při clicku na label nebo checkbox se spustí akce zobal/zabal také, což je nežádoucí.

Nejde $(".BlockEditBoxHead label") ze spouštění nějak vyloučit?

Zdroj:
...
<div class="BlockEditBox">
    <div class="BlockEditBoxHead">Nové foto: 
        <div class="Fright">
            <label class="checkbox"><input class="checkbox" type="checkbox" value="1" name="Unwrap[ImgNewNet]">Rozbalit vždy</label>
        </div>
    </div>
    <div class="BlockEditBoxBody">
        <textarea class="textarea" rows="2" cols="90" name="ImgNewNet"></textarea>
    </div>
</div>

....
JS:

$(".BlockEditBoxBody").hide()    ;
$(".Unwrap").show(200)    ;

$(".BlockEditBoxHead").click(function() {
    $(this).next(".BlockEditBoxBody").toggle(200)    ;
});
Venca V
Profil
$("div.BlockEditBoxHead").click(function() {
    $(this).next(".BlockEditBoxBody").toggle(200)    ;
});
Joker
Profil
nethor:
Stačí tu událost kliknutí pohltit dřív, než dorazí na ten element, který ji zpracovává. Tj. buď na tom <label>u, nebo na <div>u nad ním (podle toho, co všechno nemá na klik reagovat).
nethor
Profil
Venca V:
To nic neřeší.
label je vnořený do "div.BlockEditBoxHead", proto se akce spouští.
Jde mi o to, jakým způsobem vyloučit ze spouštění label.


Možná by to mohlo jít takhle nějak:
$(".BlockEditBoxHead:not(.BlockEditBoxHead label)").click(function() {    
    $(this).next(".BlockEditBoxBody").toggle(200)    ;
});
nebo
$(".BlockEditBoxHead").not(".BlockEditBoxHead label").click(function() {    
    $(this).next(".BlockEditBoxBody").toggle(200)    ;
});

.. bohužel však nefunguje, spouští se stále.
RockFire
Profil
Jestli ti dobře rozumím, tak přidat:
$(".BlockEditBoxHead label").click(function(e) {
    e.stopPropagation();
});

Ukázka
Joker
Profil
RockFire:
To jsem psal v [#3]. Jen pozor, že v IE je event.stopPropagation až od IE9.
RockFire
Profil
Joker:
Já byl raději konkrétnější, vypadá to, že stále tápal. Jinak dobrá připomínka, díky.
nethor
Profil
RockFire:

Přesně!
Děkuji.


PS: Mezitím jsem to obešel vytvořením samostatného elementu pro click.

<div class="BlockEditBoxHead">
   <div class="Fright">
            <label class="checkbox"><input class="checkbox" type="checkbox" value="1" name="Unwrap[ImgNewNet]">Rozbalit vždy</label>
   </div>
<div class="Click">Nové foto:</div>
</div>
...

js:
$(".BlockEditBoxHead .Click").click(function() {    
    $(this).parent(".BlockEditBoxHead").next(".BlockEditBoxBody").toggle(200)    ;
});
Joker
Profil
nethor:
Mezitím jsem to obešel vytvořením samostatného elementu pro click.
Není v tom případě snazší ten klik pověsit na BlockEditBoxBody?
nethor
Profil
Joker:

To ne, BlockEditBoxBody je je ve výchozím stavu skrytý $(".BlockEditBoxBody").hide() ; #1 , takže by nešel rozkliknout.
Ve výchozím stavu se mají zobrazit pouze nadpisy/popisky BlockEditBoxHead a při clicku na ne se má zobrazit jejich ovládání, tj. BlockEditBoxBody .

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: