В чем разница между щелчком флажка и вызовом его функции .click()?

Рассмотрим следующий код:

HTML:

<input type='checkbox' />
<div>Click here</div>

JS:

$(function() {
    $('input').click(function() {
        document.write($(this).is(':checked') ? "checked" : "unckecked");
    });
    $('div').click(function() {
        $('input').click();
    });
});

При щелчке по галочке на выходе будет checked, но если щелкнуть "Щелкнуть здесь", выход будет unckecked. Почему это?

Ответы

Ответ 1

Поскольку событие click отличается от события change, в котором изменяется элемент. Когда <div> выполняет .click(), запускает событие click, которое еще не изменило состояние флажка, поэтому, когда он его проверяет, он находится в предыдущем состоянии.

Когда вы нажимаете непосредственно на <input>, вы уже изменили состояние, даже если событие change срабатывает 2-го порядка, основная точка - это статус флажка checked изменился, до click обработчик проверяет его, поэтому текущее состояние.

Если вы хотите получить точную информацию о состоянии и активировать событие change, например:

$(function() {
    $('input').change(function() {
        $("span").append("<br />" + (this.checked ? "Checked" : "Uncecked"));
    });
    $('div').click(function() {
        $('input').click().change();
    });
});

Здесь вы можете попробовать здесь, по случайности это не вопрос поведения, и вы хотите получить внешний clickable area, так я бы сделал это (через <label> обертывание ввода).