jquery函數clone與clone(true)的用法差異詳解-js教程-PHP中文網

jquery函數clone與clone(true)的用法差異詳解

巴扎黑

發布： 2017-06-25 09:58:12

原創

1267 人瀏覽過

<span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.4.3.js" type="text/javascript"></script>
  
<script>
$(document).ready(function(){
  
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
  
});
</script>
    
</head>
<body>
<button>Clone Me!</button>
</body>
</html></span>

登入後複製

（1）這個例子中clone , clone(true)的差別在於，clone(ture)除了複製集合，還會複製click句柄

（2）現象就是：clone的Clone Me! 無法繼續點選克隆。但是clone(true)出來的 Clone Me! 可以繼續克隆，和原本按鈕沒有差別。

如上是ITeye中的經驗，今天確實深刻感悟了一番。差點兒又寫出了一大堆冗餘程式碼。過程如下：

<span style="font-size:18px;"><li class="more_box"></li>
<li class="tab_more">
     <p id="more_list">
          <a href="#"><b>绩效考核</b></a>
          <a href="#"><b>管理考核</b></a>
          <a href="#"><b>岗位分析</b></a>
          <a href="#"><b>系统维护</b></a>
          <a href="#"><b>个人设置</b></a>
    </p> 
</li></span>

登入後複製

需要實現的效果是id="more_list"下的a點擊後，將a複製並加入

之中。

<span style="font-size:18px;">$("#more_list>a").click(function(){
    $(".more_box").html($(this).clone(true)).show().click();
})</span>

登入後複製

結果確實實作了克隆，但li元素本身的click事件怎麼也運作不了了。 (以上述原理，當clone(true)時，將a的click事件也複製過去了，所以li單擊時觸發的是a的click的事件，原本的事件被覆蓋)
於是乎找了一下午原因終於發現了。

去掉clone(true),中的true即可（只複製元素，不複製事件）。

<span style="font-size:18px;">$("#more_list>a").click(function(){
  $(".more_box").html($(this).clone()).show().click();
})</span>

登入後複製

以上是jquery函數clone與clone(true)的用法差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jquery函數clone與clone(true)的用法差異詳解