無法運行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次點擊事件。（第1次打開YouTube播放器，點擊播放按鈕&第2次關閉播放器並替換舊內容）。

問題是，在替換原始內容後，我無法重新執行打開視頻播放器的點擊功能。

可能是什麼原因？建議/幫助請。

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元素工作。在你的情況下，你將刪除舊的元素，並添加它作爲新的元素。