予期しないjQueryの行動クラス

Question

することにより、動的に生成された要素にアクセスするとき、私は動的にいくつかのチェックボックスを生成し、次のjQueryコードがあります。

var container = $('#checkbox_list_container'); 
var html = '<input type="checkbox" class="selection_checkboxes" name="ids[]" value="1" />'; 
container.append($(html)); 

を私はまた、これらのチェックボックスのいずれかがクリックされたときに警告をポップアップ表示次のコードを持っています：

何らかの理由

$(document).ready(function() { 
$('.selection_checkboxes').click(function() { 

    alert('click detected'); 

    if ($(this).attr('checked')) 
    { 
    if ($('.selection_checkboxes:checked').size() > 3) 
    { 
     alert('You can only select up to 3 items');  
     return false; 
    } 
    } 
}); 
}); 

、jQueryのは、動的に生成されたチェックボックスのいずれかがクリックされたときを検出し、警告を表示することができません（「検出されたクリック」）はおろか、メッセージをすべてチェックし、チェックボックスの数を取得します同じクラス名で。

私が間違っていることを知っていますか？

Answer 1

あなたは、動的要素を作成するためのハンドラをアタッチするjQueryのliveを使用する必要があります。その後、delegateは、より効率的で、すべてのチェックボックスが#checkbox_list_containerにある場合

$('.selection_checkboxes').live('click', function() { 
    //stuff 
}); 

を：

$('#checkbox_list_container').delegate('.selection_checkboxes', 'click', function() { 
    //stuff 
}); 

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/