Question

当使用与jQuery混合的普通Javascript（我使用的两个不同的库）时，我遇到了这个问题。因此，对于文本输入字段，普通Javascript库依赖于使用addEventListener方法添加的更改事件绑定。另一个jQuery插件（datetimepicker）用于更改字段，并在更新值后触发jQuery.change（）方法。

问题是，侦听器不是由jQuery事件触发的。这里有一些简单的代码来说明这个问题。

<!DOCTYPE html>
<html>
<body>
<input id="abc">abc abc.</input>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.getElementById('abc').addEventListener("change", function(){
  alert('change event triggered');
 });
$('#abc').change();
</script>
</body>
</html>

鉴于非常简单的html页面，事件监听器实际上不会被jQuery.change（）方法触发，因此不会显示警告框。如果我手动更改输入字段，则事件正常。

跟进：如果使用jQuery进行事件绑定和触发，则没有问题。问题是，我使用的是一个用普通Javascript（JSONEditor [https://github.com/jdorn/json-editor]）编写的库，并且使用Javascript API添加了事件绑定，我使用的其他库改变了一些输入字段并触发了事件使用jQuery，事件未被捕获。

Answer 1

在jquery中使用 trigger()

$('#abc').on("change", function(){
    alert('change event triggered');
}).trigger("change");

Answer 2

是的，jQuery.change()（和jQuery.trigger()）不会触发添加了addEventListener的侦听器。

这目前是jQuery的WONTFIX（请参见已解决的问题#2476，#3347）（source）

我的解决方法：

替换

$('#abc').change(); // or $('#abc').trigger('change');

与此：

$('#abc')[0].dispatchEvent(new Event('change'));

首先，您从jQuery元素（`$（'＃abc'] [0]（source）中拉出本机DOM元素，然后调度事件。这种调度事件将由native和jQuery侦听器。请参见demo。

Answer 3

尝试在document.ready()中包装jquery代码，并为此目的使用简单的jquery事件处理程序，如下所示： -

<script>
$(document).ready(function(){
  $('#abc').on('change',function(){
    alert("here");
  }).change(); // trigger `.change()` event on page load.
});
</script>

或者如果您使用Jquery动态生成HTML，请尝试事件委派： -

<script>
 $(document).ready(function(){
    $(document.body).on('change','#abc',function(){
        alert("here");
    }).change(); // trigger `.change()` event on page load.
 });
</script>

jQuery.change（）与addEventListener不兼容？

3 个答案: