HTMLをコピーしてイベントを保存する

要素（#clone）のinnerhtmlをクローンし、別の要素（#newLocation）に挿入したいと考えています。HTMLをコピーしてイベントを保存する

clone（）を使用する際の問題は、現在#newLocationにある要素（存在する場合）を削除してから、#cloneの各要素を反復して#newLocationに追加することです。世界の終わりではなく、より簡単な方法を望んでいます。

代わりに、私はhtml（）を使用すると思いました。これはイベントを保存しないので、ONを使用しても委任する必要があります。しかし、私はこの仕事がうまくいったと思っていました。

私が間違っていることは何ですか？また、html（）ソリューションが動作する場合でも、clone（）ソリューションを使用する方が効率的だと思いますか？

ありがとう

EDIT。私の最初のプラグインを書きました.http：//jsfiddle.net/Wnr65/動作するようです。使い方はいいですか？確かにそれはより良い書き方ができます。おかげ

$(document).ready(function(){ 
    $("#cloneIt").click(function(){$('#newLocation').cloneInnerHtml('clone').css('color', 'red');}); 
    $("#clone a").click(function(){alert("click");}); 
    $("#clone select").change(function(){alert("change");}); 
}); 

(function($){ 
    $.fn.cloneInnerHtml = function(id) { 
     this.empty(); 
     var $t=this; 
     $('#'+id).each(function() {$t.append($(this).clone(true));}); 
     return this; 
    }; 
})(jQuery); 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Clone INNERHTML</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" language="javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#cloneIt").click(function(){$('#newLocation').html($('#clone').html());}); 

    //Only works on original clone 
    $("#clone a").on("click", function(){alert("click");}); 
    $("#clone select").on("change", function(){alert("change");}); 

    //Doesn't work at all 
    $("#newLocation a").on("click", function(){alert("click");}); 
    $("#newLocation select").on("change", function(){alert("change");}); 

}); 

</script> 

</head> 
<body> 
<input type="button" value="Clone it" id="cloneIt" /> 

<p>Original clone is shown below</p> 
<div id="clone"> 
<a href="#">Click Me</a> 
<select><option>Hello</option><option>Goodby</option></select> 
</div> 
<hr /> 
<p>Insert new clones below.</p> 
<div id="newLocation"> 
<p class="someOldElement">someOldElement</p> 
</div> 

</body> 
</html>

出典

2012-04-25 user1032531

http://api.jquery.com/clone/と一緒にコピーする必要があるかどうかを示すパラメータを受信

var $element = $("a"), $target = $(".target"), $clone; $element.on("click", function(ev) { ev.preventDefault(); console.log("click"); }); $clone = $element.clone(true); $clone.appendTo($target);

Javascriptコード[jsfiddle.net]（HTTP：/ /jsfiddle.net）？ – Jakub

あなたは正確に何をしたいですか？要素をコピーしますか？または要素を移動しますか？ – pomeh

@Jakup http://jsfiddle.net/t8Knk/ – user1032531

を見てあなたが望むようにコードが反応しないことが通常です。あなたは

$("#clone a").on("click", function() { 
    alert("click"); 
});

を行うと、それは#clone aセレクタに一致する要素にclickイベントをバインドします。これらの要素は、実行の瞬間に決定されます。あなたの場合、この行は、の最初の唯一のリンクにイベントをバインドします。

同じルールがコード

$("#newLocation a").on("click", function() { alert("click"); });

のために適用されますが、ここでの違いは、実行の瞬間に、#newLocation内部何a要素が存在しない、ということなので、選択が空で、ハンドラがあります全く縛られていない。あなたは

$('#newLocation').html($('#clone').html());

が、それは一つの要素からHTMLコンテンツを取得し、別の要素にコピーしますけど、それが唯一のHTMLコンテンツについてですので、イベントはまだ前と同じ結合後

、 "コピー操作 "を行う。法上の

異なる構文を持っており、一つだけは、イベントの委任を許可する：

// get all current "a" elements inside the "#clone" // and bind the click event $("#clone a").on("click", handler); // get the "#clone" element, bind a click event to it // BUT trigger the event only when the origin of the event is an "a" element // here the event delegation is enabled // it means that future "a" elements will trigger the handler $("#clone").on("click", "a", handler); // if you want it to work with your code // you could do something like below // this add a click handler to all present and future "a" elements // which are inside "#clone" or "#newLocation" // but this is not the recommended way to do this, check below the clone method $("#clone, #newLocation").on("click", "a", handler);

clone方法は、要素を削除しません、ここで働くデモhttp://jsfiddle.net/pomeh/G34SE/

HTMLコードがあります

<div class="source"> <a href="#">Some link</a> </div> <div class="target"> </div>

cssコード

div { width: 100px; height: 25px; } .source { border: solid red 1px; } .target { border: solid blue 1px; }

方法も作成できるイベントハンドラは、要素

出典

2012-04-25 14:37:54 pomeh

偉大な答え!!!! – user1032531

だから、どのような解決方法を使用しますか？これは、クローンが問題を起こさないことについてあなたを助けますか？ – pomeh

ジョナサンが提案したのと同じ解決策。 $（ "＃clone"）.on（ "クリック"、 "a"、ハンドラ）; $（ "＃clone a"）.on（ "click"、ハンドラ）。あなたはちょうどより教育的な答えを持っていました。ご協力ありがとうございました！ – user1032531

編集：私は.onで動作するようにそれを得たがここfiddleです。またjQuery API for .onをチェックアウトして、「直接委任イベント」セクション

$("#clone a").on("click", function(){alert("click");}); 
$("#clone select").on("change", function(){alert("change");}); 

$("#newLocation").on("click", "a", function(){alert("click");}); 
$("#newLocation").on("change", "select", function(){alert("change");});

出典

2012-04-25 14:22:20 Jonathan

'live'はjQuery 1.7 http://api.jquery.com/live/から非難されています。古いバージョンの 'on'メソッドや' delegate'メソッドを使うべきです – pomeh

ええ、私は知っていますが、何らかの理由でonが動作していません。ライブはやや劣悪なパフォーマンスを示しますが、うまくいくでしょう。 – Jonathan

しかしon（）はうまくいくはずですか？理由は何ですか？ – user1032531

HTMLをコピーしてイベントを保存する

答えて

関連する問題