Question

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

这是我的HTML和JQuery代码

＆＃13;

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);
            }
        }
    });
});

＆＃13;

<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>

＆＃13;

我该怎么办？我是jquery的新手试图找到解决方案，但没有结果。

Answer 1

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

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

Answer 2

您需要使用event delegation，因为原来的html标记正在被更改。

事件处理程序绑定到初始events:{ 'click button#3continue': 'displayCoupon' }, initialize: function(){ var self=this; _.bindAll(this,'render','addProductDetails','displayCoupon'); this.collection = new List(); this.addProductDetails(); }, displayCoupon: function(){ //e.preventDefault(); console.log("in displayCoupon"); $('#couponcheck').empty(); $('#couponcheck').append('<div class="col-xs-8"><input type="text" class="form-control" id="enterCoupon"></div>'); $('#couponcheck').append('<div class="col-xs-8"><button type="button" class="btn btn-success btn-sm" id="couponbutton">Apply</button></div>'); },，它将被替换并再次添加，因此事件将丢失。

#watch-video

您可以使用静态父代替jQuery(document).on('click','#watch-video',function(){ });代理此事件，在您的情况下：

jQuery(document)

<强>更新：

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

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

});

JQuery Button第二次不可点击？

2 个答案: