使用 ：check inside ：not 与 .on() 不匹配

Question

我正在尝试获取一个点击事件，以绑定到未在正文指定部分检查的所有单选输入。我还希望它在将来绑定到任何新的未检查的无线电输入。

根据文档（.on、：not和：checked），我希望以下代码能够工作：

$(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>");
    });
});

但是它没有（jsFiddleExample）。如果将:not(:checked)替换为:not(.tmp)，则可以正常工作（jsFiddle示例）。此外，如果使用.click，它适用于现有输入，但不会绑定到新输入（jsFiddleExample）。

为什么: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>");
            }
    });
});

演示