jquery clone 與 clone(true) 的區別

時間 2019-11-17

原文原文鏈接

 <!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>

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

（2）現象就是：clone的 Clone Me! 沒法繼續點擊克隆。可是clone(true)出來的 Clone Me! 能夠繼續克隆，和本來按鈕沒有區別。

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

javascript

            <li class="more_box"></li>
            <li class="tab_more">
                 <div 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>
                 </div>
           
            </li>

須要實現的效果是id="more_list"下的a單擊後，將a克隆並添加到<li class="more_box"></li>之中。

html

  $("#more_list>a").click(function(){
      $(".more_box").html($(this).clone(true)).show().click();
  })

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

去掉clone(true),中的true便可（只克隆元素，不克隆事件）。java

   $("#more_list>a").click(function(){
      $(".more_box").html($(this).clone()).show().click();
  })

一切搞定~~~jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。