search

Home >Web Front-end >JS Tutorial >Detailed explanation of the usage difference between jquery function clone and clone(true)

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

巴扎黑
巴扎黑Original
2017-06-25 09:58:121276browse

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


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

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


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>


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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of jQuery.detach() function usageNext article：Detailed explanation of jQuery.detach() function usage

Related articles

See more