using：checked inside：.on（）と一致しません

Question

ボディの指定されたセクションでチェックされていないすべてのラジオ入力にバインドするためのクリックイベントを取得しようとしています。私はこれも未確認の新しいラジオ入力にバインドすることをお勧めします。

ドキュメント（.on、:not、そして:checked）に基づいて、私は仕事に次のコードを期待：それは（jsFiddle Example）ないしかし

$(function() { 
    var count = 0; 
    $("#stuff").on("click", "div.gr input:not(:checked)", function(){ 
     $('div.gr').append("<label class='gr'><input type='radio' name='group3'>Another input "+(++count)+"</label>"); 
    }); 
}); 

を。 :not(:checked)を:not(.tmp)に置き換えた場合、それは機能します（jsFiddle Example）。さらに、.clickを使用すると、既存の入力に対しては機能しますが、新しい入力（jsFiddle Example）にはバインドされません。

なぜ:not(:checked)が.onで失敗するのですか？

Answer 1

あなたは#stuffにonを使用しているので、それはbublingイベントの助けを取ると時間によってイベントが#stuffラジオボタンが既にcheckedあるので、セレクタが一致しませんに達します。 clickイベントの代わりにmousedownを使用し、セレクタをdiv.gr labelに変更しても問題ありません。

$(function() { 
    var count = 0; 
    $("#stuff").on(
     "mousedown", 
     "div.gr label", 
     function(){ 
      console.log($(this).find('input')); 
      if(!$(this).find('input').is(':checked')){ 
       $('div.gr').append("<label class='gr'><input type='radio' name='group3'>Another input "+(++count)+"</label>"); 
      } 
    }); 
}); 

Demo