slideUp funktioniert nicht

Question

Ich konnte die Antwort nicht finden, obwohl es einfach scheint. Ich habe ein Element, das, wenn es geklickt wird, ein Element slideDown macht. Wenn dies passiert, wird ein anderes Element am Ende hinzugefügt, das wie ein Link funktioniert, um denselben Inhalt zu verschieben. So funktioniert das slideDown, aber das slideUp nicht. Ich habe sogar gerade den SlideUp so geändert, dass nur noch ein Alarm angezeigt wird und er nicht angerufen wird. Ich werde mehrere davon auf der Seite haben, also muss ich das "next" .hide-reveal div nennen.

html:

<p class="read-more">read more link</p> 
<div class="hide-reveal"> 
    <p> here is first para</p> 
    <p> here is second para.</p> 
</div> 

und die CSS:

.hide-reveal{ 
    display:none; 
} 

und die js:

$('.read-more').on('click',function(){ 
$(this).next('.hide-reveal').slideDown().after("<p class=\"read-less\">read less</p>"); 
}); 
$(".read-less").on('click',function(){ 
    alert("hi"); 
}); 

Warum wird nicht meine zweite Funktion Arbeit?

Answer 1

Da das Element .read-less innerhalb des Onclick-Ereignisses in Verbindung mit dem Element .read-more instanziiert wird. Sie müssen dies tun:

$('.read-more').on('click',function(){ 
 
$(this).next('.hide-reveal').slideDown().after("<p class=\"read-less\">read less</p>"); 
 
$(".read-less").on('click',function(){ 
 
    alert("hi"); 
 
}); 
 
});

.hide-reveal{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<p class="read-more">read more link</p> 
 
<div class="hide-reveal"> 
 
    <p> here is first para</p> 
 
    <p> here is second para.</p> 
 
</div>