ajaxロードされたコンテンツからチェックボックス値を取得する方法

Question

チェックボックスリストを生成する外部ファイルがあります。そしてこのファイルはjqueryの読み込みによって読み込まれました。私は、チェックボックスをクリックして親のdivを何かで更新したい。

HTML

<div id="testiContent"></div> 

checkbox.php

<div class="alert alert-info"><input type='checkbox' class='groupid' value='1'>1</div> 
<div class="alert alert-info"><input type='checkbox' class='groupid' value='2'>2</div> 
<div class="alert alert-info"><input type='checkbox' class='groupid' value='3'>3</div> 

jqueryの

$('#testiContent').load('checkbox.php');//load file via ajax 
$("#testiContent input.groupid").change(function(){ 
    if($(this).is(":checked")){ 
     $(this).parents().addClass("alert alert-success"); 
    }else{ 
     $(this).parent().removeClass("alert alert-success"); 
    } 
}); 

理想的には、チェックボックスCリックすると、アラート部門は緑色に変わります。私はそれを通常のスクリプトでは動作させることができますが、Ajaxでチャンスはありません。ここ

フィドル：HTMLコントロールが動的にロードされるとhttp://jsfiddle.net/o6Lk17db/1/

Answer 1

まだ存在しない要素にはバインドできないため、動的に追加される要素は$"#testiContent input.groupid"セレクタの対象になりません。これを回避する方法は、が既に存在するものにバインドすることです。が既に存在します。たとえば、要素が動的に追加される親コンテナです。

$("#testiContent").on('change', 'input', function(){ ... }); 

は、特にその親内の適切な（input）ターゲットのイベントのために、親にリスナーを添付します：

はこのような何かを試してみてください。

Answer 2

、これらのコントロールのイベントを手動でバインドする必要があります。したがって、要素の追加が完了すると、チェック/クリックイベントをバインドする必要があります。あなたはこの

$("input.groupid").change(function() { 
    if ($(this).is(":checked")) { 
    alert($("input.groupid").val()); 
    $(this).closest('div').removeClass("alert-info"); 
    $(this).closest('div').addClass("alert-success"); 
    } else { 
    $(this).closest('div').removeClass("alert-success"); 
    $(this).closest('div').addClass("alert-info"); 
    } 
}); 

Answer 3

使用などのコードを書くことができますので、実際には何をターゲットにしていません。 はコンテンツがDOMに入った後に、リスナーをchangeの添付を試みるだけで読み込むようにコールバック関数を渡すことができますが、ドキュメント上でonメソッドを使用する方が簡単かもしれません。コールバックに依存する必要があります：

$('#testiContent').load('checkbox.php');//load file via ajax 
$(document).on('change', 'input.groupid', function(e){ 
    var target = e.target; 
    if($(target).is(":checked")){ 
     $(target).parents().addClass("alert alert-success"); 
    }else{ 
     $(target).parent().removeClass("alert alert-success"); 
    } 
}); 

これは正確には正しくないかもしれませんが、少なくともそれはトリガーになると思います。

Answer 4

私の勘では、コンテンツがDOMに読み込まれる前に、あなたは、単にchangeリスナーを装着していることである

$(document).on("change","input.groupid").change(function(){ 
    // your code here 
}); 

Answer 5

コンテンツがajax経由でロードされるため、ドキュメント上でchangeイベントを使用する必要があります。親divを変更するためにtoggleclass関数を使用することができます。

$('#testiContent').load('checkbox.php');//load file via ajax 
$(document).on('change', '.groupid', function(e) { 
    $(this).closest("div").toggleClass("alert-success alert-info"); 
});