jquery関数cloneとclone(true)の使い方の違いを詳しく解説-jsチュートリアル-php.cn

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) はコレクションの複製に加えて、クリックハンドルの複製も行うことです

(2) 現象は次のとおりです: 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 要素自体の clickevent は実行できません。 (上記の原則に基づいて、clone(true) の場合、a のクリックイベントもコピーされるため、li がクリックすると、a のクリックイベントがトリガーされ、元のイベントが上書きされます)
そこで、午後をかけて探しましたその理由やっと分かりました。

clone(true) の true を削除するだけです (イベントではなくクローン要素のみ)。

りー

以上がjquery関数cloneとclone(true)の使い方の違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。