Использование: проверено внутри: не совпадает с .on ()

Question

Я пытаюсь получить событие щелчка для привязки ко всем радиовходам, которые не отмечены в указанном разделе тела. Я также хотел бы, чтобы это связывалось с любыми новыми неконтролируемыми радиовходами в будущем.

Основываясь на документации ( .on , : не и : проверено ), я ожидал, что следующий код будет работать:

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

Однако это не так ( Пример jsFiddle ). Если вы замените :not(:checked) на :not(.tmp), это сработает ( Пример jsFiddle ). Кроме того, если вы используете .click, он работает для существующих входов, но не привязывается к новым входам ( jsFiddle Пример ).

Почему :not(:checked) терпит неудачу в .on?

Answer 1

Поскольку вы используете on на #stuff, потребуется всплывающее уведомление о событии, и к тому моменту, когда событие достигнет #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>");
            }
    });
});

Демо