jQueryのクリックイベントは一度しか動作しませんが（常に発生します）

jQuery newbyを以下のように助けてください。私はフォームを持っており、＃add Moreボタンがクリックされると、フォームフィールドの連続したチャンクを追加しようとしています。このボードの助けを借りて、私は今働いている。しかし、それは一度しか動作しません。私は、最小限のケースまでの事を削れました：jQueryのクリックイベントは一度しか動作しませんが（常に発生します）

<html> 
<head> 
<title>Reserves Form</title> 
<script src="../jquery/jquery-1.7.1.min.js"></script> 
<script> 
$(document).ready(function() { 
var chunk = $('.content').clone(true); 
$('#addMore').live('click', function() { 
    alert('debug!'); 
    $('#container').append(chunk); 
});  
}); 
</script> 
<body> 
<div id="container"> 
<p class="content">lorem ipsum blah blah</p> 
</div> 
<button type="button" id="addMore">Add Another Paragraph</button> 
</body> 
</html>

私はページをロードし、ボタンをクリックすると、私はデバッグの警告を表示し、期待どおり「コンテンツ」段落のクローンが表示されます。もう一度ボタンをクリックすると、警告が表示されますが、新しい段落は表示されません。なぜクリックに反応するのでしょうか？そして、どうすればそれらを両方とも動作させることができますか？

出典

2012-02-13 anaximander

それは何もしていないかのようにあなたはどんな違いが表示されませんので、あなたが同じコンテナに何度も何度も同じオブジェクトを追加している：あなたは、複製された要素を返す関数のチャンクを作ることによってそれを修正することができます。

クリックハンドラー内の最初の.content要素をクローンして追加します。

$(document).ready(function() { 
    $('#addMore').live('click', function() { 
     alert('debug!'); 
     $('#container').append($('.content:first').clone(true)); 
    });  
});

また、クローンオブジェクトの代わりにhtml文字列を追加することもできます。このアプローチでは、文字列の追加は何回でも行うことができるので、以前のアプローチよりも優れているため、クローンは1回だけ使用されます。

$(document).ready(function() { 
    var content = $('<div />').append($('.content').clone(true)).html(); 

    $('#addMore').live('click', function() { 
     alert('debug!'); 
     $('#container').append(content); 
    });  

});

出典

2012-02-13 20:52:16 ShankarSangoli

これはすごくうまくいきます！ありがとうございました！ – anaximander

Kool、それを答えとしてマークしてください。 – ShankarSangoli

very similar questionは既に尋ねられています。ハンドラが実行されるたびに要素をクローンする必要があります。

$(document).ready(function() { 
$('#addMore').live('click', function() { 
    var chunk = $('.content').clone(true); 
    alert('debug!'); 
    $('#container').append(chunk); 
});  
});

出典

2012-02-13 20:49:30

これが毎回発生するようにするには、ライブハンドラ内の段落を複製する必要があります。あなたのスクリプトは、その段落の1回限りのクローン（キャッシュされた）コピーを追加しています。クローンステートメントをクリックハンドラに移動して、期待どおりの結果を得ます。

出典

2012-02-13 20:49:40 Mattygabe

は他のあなたの質問に関連していないこの

$(document).ready(function() { 

$('#addMore').live('click', function() { 
    var chunk = $('.content').clone(true); 
    alert('debug!'); 
    $('#container').append(chunk); 
});  
});

と何かのようになり、クリックイベント内chunk = $('.content').clone(true);を置く：あなたは本当にliveを使用しますか？

出典

2012-02-13 20:49:53

いいえ、+1。私が気付いたもう一つの問題は、質問で使用されたセレクタで、クラスのすべての要素が.contentがクリックごとに複製されるということです。最初のクリックで1が追加され、2番目のクリックで2つ追加されます。 –

おっと！私は "on"を使うべきです。申し訳ありません – anaximander

おそらく$（ '。コンテンツ'）。最後（）。クローン（真）; – Jason

クローニングは1回だけです。最初の割り当ての後、クローンされた要素を参照しているだけなので、それはどこから元の場所に移動しているのでしょうか。

var chunk = function() { 
    return $('.content').clone(true); 
}

出典

2012-02-13 20:51:02 Jivings

jQueryのクリックイベントは一度しか動作しませんが（常に発生します）

答えて

関連する問題