JQuery 按钮无法第二次点击？

Question

我已经使用 Youtube iframe api 在点击按钮时播放 youtube 视频。 Html 单击按钮时代码被替换为 youtube iframe 视频代码。当视频结束时，之前的 html 代码将被替换。但是有些按钮点击的方式第二次不起作用。请帮忙！

这是我的 HTML 和 JQuery

代码

jQuery(document).ready(function () {
  jQuery('.play_button').click(function(e){
      var html_sidebar = jQuery(this).closest(".sidebar-container2").html();
      var player;
      e.preventDefault();
          player = new YT.Player('video-play', {
           height: '345px',
             width: '100%',
             videoId: '7o0Nkfdp2s4',
             events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }      
          });

      

      // autoplay video
      function onPlayerReady(event) {
          event.target.playVideo();
      }

      // when video ends
      function onPlayerStateChange(event) {        
          if(event.data === 0) {
           jQuery('#tertiary1').html(html_sidebar);
          }
      }
     });
  
    jQuery('#watch-video').click(function (e) {
        var html_sidebar = jQuery(this).closest(".sidebar-container2").html();
        var player;
        e.preventDefault();
        player = new YT.Player('video-play', {
            height: '345px',
            width: '100%',
            videoId: '7o0Nkfdp2s4',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });



        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {
            if (event.data === 0) {
                jQuery('#tertiary1').html(html_sidebar);
            }
        }
    });
});

<div role="complementary" class="sidebar-container2" id="tertiary1">
    <div id="video-play" class="widget-1 widget-first widget-last widget-odd widget_video">
        <div class="textwidget">
            <div class="video_container">
                <span class="play_button"></span>
                <div class="video-text">
                    <h3>Delivering Change Foundation</h3>
                    <p>DCF is an independent organization that partners with governments and communities to accomplish nation transformation.</p>
                    <p><a id="watch-video" class="yellow_arrow">Watch the video
    </a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src="https://www.youtube.com/iframe_api"></script>

我能做什么？我是 jquery 的新手试图找到解决方案但没有结果。

Answer 1

您将需要使用 event delegation，因为原始 html 标记正在更改。

事件处理程序绑定到初始 #watch-video，它被替换并再次添加，因此事件丢失。

jQuery(document).on('click','#watch-video',function(){

});

您可以使用静态父项而不是 jQuery(document) 来委托此事件，在您的情况下是：

jQuery('#tertiary1').on('click','#watch-video',function(){

});

更新:

如果您有多个按钮触发器，请使用组合选择器，

jQuery('#tertiary1').on('click','#watch-video,.play_button',function(){

})

Answer 2

您需要使用 event delegation method，将您的选择器代码替换为以下代码并尝试。

jQuery(document).on('click', '#watch-video', function (e) {

JQuery 按钮无法第二次点击？

JQuery Button Not Clickable Second Time?

html

javascript

jquery

youtube-api