ホームページ >ウェブフロントエンド >jsチュートリアル >jquery関数cloneとclone(true)の使い方の違いを詳しく解説
jquery関数cloneとclone(true)の使い方の違いを詳しく解説
- 巴扎黑オリジナル
- 2017-06-25 09:58:121306ブラウズ
<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 を複製して 24d7c8b521e21a29657db5debc8a5a8d
<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 サイトの他の関連記事を参照してください。