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

Question

我在这里有以下代码：

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

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

当我加载页面时，选中复选框，但不会提示“hello world”

但是，当我手动点击复选框时，会出现“hello world”提示

是什么给出了？

Answer 1

当通过代码更改值时，您需要致电change()或使用trigger()来触发change事件。

使用.change()

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

使用.trigger()

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

Answer 2

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

您可以使用.change() / .trigger('change');

手动触发它

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

change

  

针对<input>，<select>和<textarea>触发了更改事件   元素的值更改时的元素   用户。与输入事件不同，更改事件不一定   为元素值的每次更改触发。