以编程方式更改复选框不会触发更改事件

Question

我在这里有以下代码:

$('input[type="checkbox"][id="gridlines"]').change(function () {
    alert('hello world');
});

$('#gridlines').prop('checked', true);

当我加载页面时,选中复选框,但不会提示"hello world"

但是,当我手动单击复选框时,会出现"hello world"

是什么赋予了？

Answer 1

当通过代码更改值时,您需要调用change()或使用trigger()来tirgger change事件.

运用 .change()

$('#gridlines').prop('checked', true).change();

运用 .trigger()

$('#gridlines').prop('checked', true).trigger("change");

Answer 2

这就是假设工作的方式,只有用户交互支持才能触发更改事件

您可以使用.change()/.trigger('change')手动触发它;

$('#gridlines').prop('checked', true).change();

更改

变更事件被触发了<input>,<select>和<textarea> 元素时,该元素的值的变化是由用户提交.与输入事件不同,对于元素值的每次更改,都不一定会触发change事件.