JQuery按钮第二次不可点击？答案

【问题标题】：JQuery Button Not Clickable Second Time?JQuery按钮第二次不可点击？
【发布时间】：2015-09-05 00:00:48
【问题描述】：

我使用 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 的新手试图找到解决方案，但没有结果。

【问题讨论】：

标签： javascript jquery html youtube-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您将需要使用 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(){

})

【讨论】：

查看更新后的代码，您可以使用一个单击处理程序而不是两个单独的处理程序。