JQuery点击功能一次有效，但需要很多工作

Question

我有一个功能，可以删除另一个div，并在单击链接时（在删除的div中）用视频替换它。

当视频结束时，视频被删除，被删除的div被放回到div中。

问题是，如果我要再次点击链接，没有回应。

任何想法？

jQuery代码

$('#panl-one a#watch-now').click(function(){ 
     var copy = $('#panl-one').html(); 
     $('#panl-one').html('<video width="334" height="200" controls muted autoplay title="Video" id="myvideo"><source src="My Movie.mp4"></video>'); 
     var video= $('#myvideo')[0]; 
     var videoJ= $('#myvideo');   
     videoJ.on('ended',function(){ 
      $('#myvideo').hide(); 
      $('#panl-one').html('<div><p><a href="#" id="watch-now">Watch again?</a></p></div>'); 
     }); 
     return false; 
}); 

HTML代码

<div class="video" id="panl-one" title="this is the panel title"> 
    <div> 
    <a href="#" class="get-link-name" id="link-one">This is the video title</a> 
    <p>Video 
    <a href="#" id="watch-now">watch now</a> 
    04:09 
    </p> 
    </div> 
</div> 

在此先感谢

Answer 1

事件代表团。

更改以下行：

$('#panl-one a#watch-now') 

到

$('body').on('click', '#panl-one a#watch-now', function(){ 

这代表点击来自该元素的身体，不管它是否已被移除或替换DOM的。

注为了获得更好的性能，将其绑定到最接近的静态父元素，而不是身体。