Question

这是我的代码：

<script>
//scrpit for playing video on image click
$(document).ready(function() {
 $('.collage_img11 .tile-content p').click(function(){
 alert('test click event');
    video = '<div id="outerdiv"><a class="close_btn" style="cursor: pointer;">[X]</a><iframe height="385" width="505" src="'+ $('div.collage_img11').attr('data-video') +'" style="z-index: 2147483647; position: relative;"></iframe></div>';
    $('div#section_one').replaceWith(video);
  });


 //script for closing video player and display the content back 
  $(document).on('click', 'a.close_btn', function (e) {
alert('test close click event');
oldcontent = '<div id="section_one" style="clear:both;float:left"><div style="float:left"><div class="collage_img11" data-video="<?php echo get_field("image1_video_link"); ?>"><span class="tile-content"><p>&nbsp;</p><h5>click & play</h5></span></div></div></div>';
$('div#outerdiv').replaceWith(oldcontent); e.preventDefault(); }); });

我知道代码格式不是那么多。但只能格式化这么多。

此代码适用于2次点击事件..（第1次打开youtube播放器点击PLAY按钮＆amp; 2nd打开关闭播放器并替换旧内容）。

问题是，在替换原始内容后，我无法重新执行点击功能以打开视频播放器。

可能是什么原因？建议/帮助请。

Answer 1

由于您要替换内容，因此需要使用事件委派

$(document).on("click",".collage_img11 .tile-content p",function(){

正常事件绑定将适用于在通风口绑定时存在于dom上的元素。在您的情况下，您将删除旧元素并将其再次添加为新元素。

Answer 2

使用事件委托：

$('body').on('click','.collage_img11 .tile-content p',function(){
 alert('test click event');
    video = '<div id="outerdiv"><a class="close_btn" style="cursor: pointer;">[X]</a><iframe height="385" width="505" src="'+ $('div.collage_img11').attr('data-video') +'" style="z-index: 2147483647; position: relative;"></iframe></div>';
    $('div#section_one').replaceWith(video);
  });

无法多次运行jQuery函数（单击）

2 个答案: