javascript - JQuery click 函数只工作一次，但需要多次工作

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

事件委托(delegate)。

更改以下行:

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

到

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

这会将点击从该元素委托(delegate)给正文，无论它是否已在 DOM 中被删除或替换。

注意 为了获得更好的性能，请将其绑定(bind)到最近的静态父元素，而不是主体。