Detailed explanation of the usage difference between jquery function clone and clone(true)-JS Tutorial-php.cn

Detailed explanation of the usage difference between jquery function clone and clone(true)

巴扎黑

Release： 2017-06-25 09:58:12

Original

1260 people have browsed it

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

Copy after login

(1) The difference between clone and clone(true) in this example is that in addition to cloning the collection, clone(ture) will also clone the click handle

(2) The phenomenon is :clone's Clone Me! cannot continue to click to clone. However, the Clone Me! generated by clone(true) can continue to be cloned, and it is no different from the original button.

The above is my experience in ITeye, and I really had a deep understanding of it today. I almost wrote a lot of redundant code. The process is as follows:

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

Copy after login

The effect that needs to be achieved is that after clicking a under id="more_list", clone a and add it to

Among.

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

Copy after login

The result is that cloning is indeed achieved, but the click event of the li element itself cannot be run. (Based on the above principle, when clone(true), the click event of a is also copied, so when li clicks, the click event of a is triggered, and the original event is overwritten)
So I found a The reason was finally discovered in the afternoon.

Remove the true in clone(true) (only clone elements, not clone events).

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

Copy after login

The above is the detailed content of Detailed explanation of the usage difference between jquery function clone and clone(true). For more information, please follow other related articles on the PHP Chinese website!