Witam.

Od godziny próbuję znaleźć rozwiązanie następującego problemu* z jQuery:

Chodzi mi o efekt dokumentu z kilkoma sekcjami, gdzie na początku tylko
jedna jest widoczna w całości, a z pozostałych tylko nagłówki.
Po kliknięciu nagłówka ukrytej sekcji powinna się ona pokazywać jednocześnie
ukrywając tą już widoczną.
W skrócie kod wygląda mniej więcej tak:

[code]
...
<style type="text/css">
.toHide {
color: red;
}
.toHide>p {
display: none;
}
.toShow>p {
display: show;
}
</style>
...
<script type="text/javascript">
$(function() {
$(".toHide").click(
function() {

$(".toShow").toggleClass("toShow toHide");
$(this).toggleClass("toShow toHide");


}
);
}
);
</script>
....
<article class="toShow">
<h3>Nagłówek</h3>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</article>
<article class="toHide">
<h3>Nagłówek</h3>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</article>
<article class="toHide">
<h3>Nagłówek</h3>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</article>
<article class="toHide">
<h3>Nagłówek</h3>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</article>

[/code]

Problem jaki występuje - artykuł który w momencie załadowania dokumentu był
widoczny, po tym jak zostanie ukryty nie reaguje już na kliknięcie (chociaż
klasa mu się zmienia) i nie może zostać z powrotem pokazany.**


*) Tak, jestem obecnie bardzo 'do tyłu' z frontendem :(
**) Nie, nie szukam gotowca - tylko jakiegoś haczyka którego mógłbym się
przyczepić żeby znaleźć powód takiego zachowania.

--
Nazon
p...@j...w.mikronezji

do góry

Dnia 25-02-2013 o 17:54:30 Nazon <n...@p...gdzies> napisał(a):

> Witam.
>
> Od godziny próbuję znaleźć rozwiązanie następującego problemu* z jQuery:
>
> Chodzi mi o efekt dokumentu z kilkoma sekcjami, gdzie na początku tylko
> jedna jest widoczna w całości, a z pozostałych tylko nagłówki.
> Po kliknięciu nagłówka ukrytej sekcji powinna się ona pokazywać
> jednocześnie
> ukrywając tą już widoczną.
> W skrócie kod wygląda mniej więcej tak:
>
> [code]
> ...
> <style type="text/css">
> .toHide {
> color: red;
> }
> .toHide>p {
> display: none;
> }
> .toShow>p {
> display: show;
> }
> </style>
> ...
> <script type="text/javascript">
> $(function() {
> $(".toHide").click(
> function() {
>
> $(".toShow").toggleClass("toShow toHide");
> $(this).toggleClass("toShow toHide");
>
>
> }
> );
> }
> );
> </script>
> ....
> <article class="toShow">
> <h3>Nagłówek</h3>
> <p>Paragraf</p>
> <p>Paragraf</p>
> <p>Paragraf</p>
> </article>
> <article class="toHide">
> <h3>Nagłówek</h3>
> <p>Paragraf</p>
> <p>Paragraf</p>
> <p>Paragraf</p>
> </article>
> <article class="toHide">
> <h3>Nagłówek</h3>
> <p>Paragraf</p>
> <p>Paragraf</p>
> <p>Paragraf</p>
> </article>
> <article class="toHide">
> <h3>Nagłówek</h3>
> <p>Paragraf</p>
> <p>Paragraf</p>
> <p>Paragraf</p>
> </article>
>
> [/code]
>
> Problem jaki występuje - artykuł który w momencie załadowania dokumentu
> był
> widoczny, po tym jak zostanie ukryty nie reaguje już na kliknięcie
> (chociaż
> klasa mu się zmienia) i nie może zostać z powrotem pokazany.**
>
>
> *) Tak, jestem obecnie bardzo 'do tyłu' z frontendem :(
> **) Nie, nie szukam gotowca - tylko jakiegoś haczyka którego mógłbym się
> przyczepić żeby znaleźć powód takiego zachowania.

chciałeś użyć http://api.jquery.com/live/ , ale nie wiedziałeś że istnieje?

--
Jordan Szubert

do góry

Jordan Szubert pisze:

>
> chciałeś użyć http://api.jquery.com/live/ , ale nie wiedziałeś że
> istnieje?
>

Nie wiedziałem.

Zresztą "As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers."

Z dokumentacji wynika że
$(".toHide").click(function(){...});
jest tożsame z
$(".toHide").on('click',function(){...});

Więc jak się można spodziewać też nie działa.

Dopiero
$(document).on('click', '.toHide', function(){...});
zadziałało.

Dzięki więc za haczyk i wędkę :)

PS.
Może mi ktoś wyjaśnić dlaczego tak wyszło?
Z dokumentacji:
/Event handlers are bound only to the currently selected elements; they must
exist on the page at the time your code makes the call to .on()/

i

$(function(){...}) -> shorthand for $( document ).ready(function(){...})


--
p...@j...w.mikronezji

do góry