无法多次运行jQuery函数(单击)

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次点击事件。(第一，点击播放按钮打开youtube播放器；第二，关闭播放器并替换旧内容)。

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

原因是什么？请给我建议/帮助。

Answer 1

使用事件委托：

$('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);
  });

Answer 2

因为要替换内容，所以需要使用事件委托，

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

正常事件绑定将对在通风口绑定时存在于dom上的元素起作用。在您的示例中，您将删除旧元素，并将其作为新元素再次添加。