1

innerhtml要素 ( ) の を複製して、#clone別の要素 ( ) に挿入したいと考えてい#newLocationます。

を使用する際の問題clone()は、最初に現在 にある要素 (存在する場合) を削除し#newLocation、次に の各要素を反復処理して#cloneに追加すること#newLocationです。世界の終わりではありませんが、もっと簡単な方法を望んでいます。

代わりに、私は使用すると思いhtml()ました。これではイベントが保持されないため、 を使用してイベントを委任する必要がありONます。私はこれがうまくいくと思っていましたが、そうではありません。

私が間違っていることは何か提案はありますか? clone()また、ソリューションを機能させることができたとしても、ソリューションを使用する方が効率的だと思いますhtml()か?

編集:私の最初のプラグインを書きました: 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>
4

2 に答える 2

2

コードが希望どおりに反応しないのは正常です。あなたがするとき

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

セレクターclickに一致する要素にイベントをバインドします。#clone aこれらの要素は、実行時に決定されます。あなたの場合、この行はイベントをページに存在する最初で唯一のリンクにバインドします。

同じルールがコードに適用されます

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

ただし、ここでの違いは、実行の時点では、内部に要素がないa#newLocationため、選択範囲が空であり、ハンドラーがまったくバインドされていないことです。

次に、あなたがするとき

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

ある要素からHTMLコンテンツを取得し、それを別の要素にコピーしますが、これはHTMLコンテンツに関するものであるため、イベントバインディングは「コピー操作」の前と同じです。

onメソッドの構文は異なり、イベントの委任を許可するのは1つだけです。

// 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;
}

Javascriptコード

var $element = $("a"),
    $target = $(".target"),
    $clone;


$element.on("click", function( ev ) {
    ev.preventDefault();
    console.log("click");
});


$clone = $element.clone( true );

$clone.appendTo( $target );​

このメソッドは、イベントハンドラーを要素http://api.jquery.com/clone/と一緒にコピーする必要があるかどうかを示すパラメーターも受け取ります。

于 2012-04-25T14:37:54.337 に答える
1

編集: .onHere's a fiddleで動作するようになりました。また、.on の jQuery API を確認し、「直接および委任されたイベント」セクションを参照してください。

$("#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-25T14:22:20.687 に答える