Forum PHP.pl

Witam,
mam 3 warstwy-divy:
- container
- effect (dla efektów, zaciemniania itp, poza tym stanowi niejako "kontener" dla komunikatów)
- newsletter (tu przedstawiony div-komunikat)

No i taki kod:

[PHP] pobierz, plaintext 
 
	$("a.newsletter").toggle(function()
	{
    $("#container").animate({ 
      opacity: 0.3
    }, 750 );
    $("#effect").fadeIn("medium");
 
    $("#effect").live('click', function()
    {
      $("#effect").fadeOut("medium");
      $("#container").animate({ 
        opacity: 1.0
      }, 750 );
    });
  },function()
	{
    $("#effect").fadeOut("medium");
    $("#container").animate({ 
      opacity: 1.0
    }, 750 );
  });
[PHP] pobierz, plaintext 

Po kliknięciu wszystko jest ok, strona przyciemniona, pokazuje się okienko.
Gdy klikam gdziekolwiek, zgodnie z założeniami wszystko "wraca do normy". Niestety, również kliknięcie na coś w div#newsletter powoduje taką akcję - zupełnie jakby wyższy priorytet miał div#effect (w sumie logiczne, jest wyżej w DOM).

Jak zrobić, aby reagowało na klik tylko poza div#newsletter, a jego zostawiło w spokoju?
Poza tym, jak widać, powtarza się kod dla toogle i dla tego kliknięcia gdziekolwiek. Da się to jakoś sensownie zrobić "w imię zasady" DRY? (IMG:style_emoticons/default/smile.gif)

Myślałem nawet o zaprzęgnięciu jQuery UI, ale taki kombajn nie jest mi potrzebny do 1 komunikatu na stronie, a poza tym lepiej jak człowiek napisze i sam się czegoś nauczy (IMG:style_emoticons/default/smile.gif)

Ten post edytował lukasamd 5.08.2010, 11:55:47

Temat: [JavaScript] jesli Twoj watek go dotyczy, KONIECZNIE przeczytaj

Najlepiej by było gdybyś umieścił ten kod live - bo nie wiem czy dobrze zrozumiałem (IMG:style_emoticons/default/smile.gif)

Prawdopodobnie chodzi o: event.stopPropagation i cancelBubble: Taki kod wywołany na zdarzeniu powinien pomóc:


Co do powtarzania się kodu, mógłbyś:
1. napisać funkcję, która robiła by powtarzające się elementy
2. wywołać zdarzenia z danego elementu:

Wszystkie kodu podałem Ci jak kod w czystym JS, gdyż nie znam jQuery, ale podejrzewam, że ta biblioteka udostępnia swoje odpowiedniki.

Już sobie poradziłem - div#newsletter był wewnątrz div#effect, wyrzuciłem na zewnątrz i poprawiłem w CSS aby nadal robił to co ma robić.
No i teraz działa już tak jak chciałem.