slideUp不工作

Question

我找不到答案，虽然看起来很简单。我有一个元素，当单击该元素时，会出现这样的情况，即将另一个元素添加到末尾，类似于指向相同内容的slideUp的链接。所以slideDown可以工作，但是slideUp不起作用。我甚至更改了slideUp，只显示一个警告，并且没有被调用。我将在页面上看到其中的几个，所以我需要调用"next“.隐藏-显示div。

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>

和css：

.hide-reveal{
   display:none;
}

而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");
});

为什么我的第二个功能不起作用？

Answer 1

因为.read-less元素是在附加到.read-more元素的onclick事件中实例化的。你需要这样做：

​

$('.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>

​