Как я могу понять это поведение флажка?

Question

Вот мой HTML:

<input class='user_roles' id="chk" type=checkbox /><br> <input id="btn_on" type="button" value="on" /><br> <input id="btn_off" type="button" value="off" />

И мой JQuery:

$('#chk').click(function() {
    if($(this).prop("checked") === true) {
        alert ("checked");   
    }
    else{
        alert ("not checked");
    } 
});

$("[id$=btn_on]").click(function () {
    $('#chk').click();
});

$("[id$=btn_off]").click(function () {
    $('#chk').click();
});

Рабочий пример: здесь .

Когда флажок щелкается мышью, он сразу же проверяется - то есть предупреждение отображается «проверено». Однако при нажатии одной из кнопок, которая косвенно вызывает метод click для флажка, этот флажок не устанавливается до тех пор, пока после не будет выполнен код щелчка.

Чтобы проверить это, пару раз щелкните мышью по флажку, и вы увидите оповещения «проверено» и «не проверено» соответственно. Нажмите «Вкл.», И вы увидите предупреждение «Не проверено», а затем флажок станет установленным. Если вы затем нажмете «Выкл.», Вы увидите «флажок», а затем флажок снят сам.

В чем причина такого поведения? Как я могу убедиться, что флажок «проверка» происходит до вызова кода прослушивателя кликов, согласно поведению мыши?

Answer 1

если это просто вопрос о том, как заставить его работать, используйте .change() вместо .click() на вашем флажке, если о том, почему он делает то, что он делает, я понятия не имею, извините

Answer 2

Используйте событие onchange вместо onclick:

http://jsfiddle.net/FCrSg/8/

Событие onclick вызывается при щелчке по блоку ДО изменения его значения.

Рабочий процесс выглядит следующим образом: вы щелкаете мышью => запускается событие OnClick => ставится галочка => запускается событие OnChange

Answer 3

Попробуйте использовать setTimeout, который немного подождет, а затем проверит его.Проблема в том, что событие срабатывает даже быстрее, чем флажок переключается по неизвестной причине.

Рабочая скрипка

$('#chk').click(function() {
    var $this = $(this);
    setTimeout(function() {
        if ($this.prop("checked") === true) {
            alert("checked");
        }
        else {
            alert("not checked");
        }
    }, 10);
});

$("[id$=btn_on]").click(function() {
    $('#chk').click();
});

$("[id$=btn_off]").click(function() {
    $('#chk').click();
});

Answer 4

Мне кажется, что объяснение состоит в том, что это ошибка в том, как браузер обрабатывает щелчки на флажках:

Поведение по умолчанию должно иметь место после вызывается пользовательский обработчик событий,То, что вы видите, когда нажимаете на кнопки, на самом деле является правильным поведением.Забавное поведение состоит в том, что когда вы щелкаете по полю, он устанавливается перед запуском пользовательского обработчика событий.

Чтобы увидеть, насколько это странно, вы можете return false; из обработчика событий.Это должно предотвратить поведение по умолчанию.Что вы увидите, так это то, что флажок на самом деле установлен, когда вы щелкаете по нему, а затем снимаете флажок, когда возвращается обработчик событий!

Кстати, я использую Firefox 4. Я не знаю, что этокак в других браузерах.Кажется, это не связано с jQuery, так как я вижу то же самое забавное поведение, когда делаю все без него.

Answer 5

Физический щелчок по флажку заставляет его уже проверяться до того, как будет инициировано событие щелчка.Используя jquery, он сначала запускает код события.Использование события изменения вместо этого даст вам желаемые результаты.

См. Рабочий пример ниже.

http://jsfiddle.net/FCrSg/3/

Answer 6

Вы можете сделать:

function alertState(el){
   if(el.prop("checked") === true) {
        alert ("checked");   
    }
    else{
        alert ("not checked");
    }
}
$('#chk').click(function() {
    alertState($(this));
});
    $("[id$=btn_on]").click(function () {
        $('#chk').prop('checked', true);
        alertState($('#chk'));
    });

    $("[id$=btn_off]").click(function () {
            $('#chk').removeProp('checked');
        alertState($('#chk'));
    });

скрипка здесь http://jsfiddle.net/FCrSg/9/

Answer 7

Я нашел этот ответ в Переполнении стека , который создает событие вручную и отправляет его.

Вы можете поместить его в функцию и вызывать из событий щелчка:

function simulateClick(target)
{
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    target.dispatchEvent(e);
}

$("[id$=btn_on]").bind("click", function() {
    simulateClick($('#chk')[0]);
});

$("[id$=btn_off]").click(function() {
    simulateClick($('#chk')[0]);
});

Попробуйте здесь: http://jsfiddle.net/FCrSg/10/

Почти так же, как вы хотели на MDN: https://developer.mozilla.org/en/DOM/dispatchEvent_example