jQuery 一般情況下,利用 clone() 來複製元素,但是複製元素後,並沒有複製原本元素綁定的事件及數據,這點有點困擾,之前是在Clone之後,重新綁定事件,但這樣會變得很麻煩,也會讓程式碼變得很亂,在 jQuery 1.4 以後 clone() 加了一個貼心的功能,可以在複製的時候選擇要不要連事件及數據一起複製。
Demo 程式如下:
這是一個簡單的範例,在按鈕上綁定一個click事件,點擊按鈕開啟警告窗
$(function(){
$('.btn').click(function(e){
alert('hi');
});
$('.clone').click(function(e){
$('.btn').clone().insertAfter($('.btn'));
});
});
這示例程式,當我們點擊 “Clone” 這按鈕,會複製一個上方的 “Click Me”按鈕,當我們點下新產生的 “Click Me”按鈕並沒有任何反應,代表並沒有複製到原本元素綁定的事件及數據。
接著我們看下方程式碼,用相同動作,原本的 “Click Me” 按鈕及新複製出的 “Click Me” 按鈕,都可以正常運行綁定事件,換而言之,事件成功被複製,如此就不用重新綁定,非常省事呢!
這兩段程式碼其中只差異在這一行
$('.btn').clone(true).insertAfter($('.btn'));
在 clone 中帶入 true,即代表複製綁定事件及數據,預設情況下是 false,詳細可參考 jQuery 的技術文件