jQuery動的チェックボックスイベント処理

Question

JSON応答からHTMLを追加すると、イベントハンドラはイベントバインドを失うように見えます。 .live()関数を使用すると、ハンドラが動作するようになります。

$.each(result[0], function(i,wellList) { 
    $jsonResult = wellList["@name"]; 
    $uid = wellList["@uid"]; 
    $dynamicCheckBoxDiv += '<input type="checkbox" name="checkbox-1" value="'+ $uid 
     + '" class="wellCheck" id="checkbox-'+i+'" />' + 
     '<label for="checkbox-'+i+'">' + $jsonResult + '</label>';    
}); 
$dynamicCheckBoxDiv += '</fieldset></div>'; 

//Append results to div 
$("#dynamicCheck").append($dynamicCheckBoxDiv).page(); 

$(".wellCheck").live('click', (function() { 

クリックイベントが発生すると、このイベントが発生するようになりました。しかし、チェックボックスを数回クリックすると、チェックボックスが間違ったボックスにランダムに関連付けられ、ワンクリックでクリックイベントの発生が開始されます。誰もこれを見たことがありますか？

他のボタンをすべてチェックする方法を追加するにはどうすればよいですか？彼らは動的に追加されているので、それだけでこの機能をバイパスするようだ：

// When select No wells is clicked this method is run 
$('#selectNone').click(function() { 
    $('#dynamicCheck .wellCheck').find(':checkbox').attr('checked', 'checked'); 
}); 

それは方法に入るのが、ボックスのいずれかをチェックするためにdoesntのようです。 jQueryとjQueryモバイルがこのページに追加されていて、両方のメソッドがdocument.readyに存在します。

Answer 1

.wellCheck要素がチェックボックスであるため、find(":checkbox")は不要です。ちょうどこれを行う：

$("#selectNone").click(function(){ 
    $("#dynamicCheck .wellCheck").prop("checked", true); 
}); 

Demo

Answer 2

最初のビットの説明は、HTMLに書き込まれたリスナーがページの読み込みにのみ適用されることです。生のHTMLをページに追加するときはいつでも、任意のリスナーを設定する必要があります。同様に、 "onclick"属性を変更するだけではリスナーに何もしません。

2番目のビットの問題は、少なくとも私の読書では、$（ "。wellCheck"）。live（...）がすべてのボックスに影響する今まで毎回作成しています。 '$ dynamicCheckBoxDiv.live（...）'のようなものでうまくいくかもしれません。

正確な構文では完全にはわかりません。手動で構築するのではなく複製されたHTMLでもっとうまく作業しました。それをDOMオブジェクトまたは何かにレンダリングするための介入ステップ（これがまだない場合） - しかし、私はこれが役に立つと思う。

また、 '.live（ "click"、...）'ではなく、 '.click（...）'を使用することもできます。

Answer 3

あなたは生きていけないデリゲートを使用する必要があります。

$("#dynamicCheck").delegate('.wellcheck','click', function(){ 
//stuff on click 
}); 

。これは良くありません生きることです体よりもその範囲に結合されるだろう。

EDITは：チェックボックス管理のいくつかの例のためにこれを参照してください。古いのattrを使用していますhttp://jsfiddle.net/h682v/3/

（）と支柱（）の代わりに原則的遺骨を使用する必要があります。