jquery - 如何使更改内容中的多个链接实例发挥作用？

Question

我正在尝试制作某种内容幻灯片，但在使更改后的内容中的链接正常工作时遇到问题。第一个正确调用下一帧，但后续帧中的链接根本不起作用。到目前为止我的代码如下。非常感谢任何帮助。

<div class="overlaycontent">
  Welcome, enjoy your stay!
  <a class="mylink" data="demo" href="#">Get Started!</a>
</div>

<div id="helpDemo" style="display:none;"> This would be content 1 <a class="helplink" data="acts" href="#">Next</a> </div>
<div id="helpActs" style="display:none;"> This would be content 2 <a class="helplink" data="more" href="#">Next</a> </div>
<div id="helpMore" style="display:none;"> This would be content 3  </div>


$(".helplink").on("click",function(e){
  if($(this).attr('data') == 'demo'){ 
    $('.overlaycontent').html($('#helpDemo').html());
  }
  if($(this).attr('data') == 'acts'){
    $('.overlaycontent').html($('#helpActs').html());
  }
  if($(this).attr('data') == 'more'){
    $('.overlaycontent').html($('#helpMore').html());
  }
});

Answer 1

改变

<a class="mylink" data="demo" href="#">Get Started!</a>

至

<a class="helplink" data="demo" href="#">Get Started!</a>

并且

$(".helplink").on("click",function(e){

至

$(".overlaycontent").on("click",".helplink",function(e){

Fiddle here.