jQuery.change(）与 addEventListener 不兼容

jQuery.change() not compatible with addEventListener?

本文关键字：addEventListener 不兼容 change jQuery 更新时间：2023-09-26

当我使用与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触发了事件，并且没有捕获事件。

是的

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

这目前是jQuery的WONTFIX(请参阅已关闭的问题#2476，#3347((来源(

我的解决方法：

取代

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

有了这个：

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

首先，从 jQuery 元素('$('#abc'][0] (source((中提取原生 DOM 元素，然后调度你的事件。这样，调度事件将由本机侦听器和 jQuery 侦听器处理。请参阅演示。

在jquery中使用trigger((

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

尝试将 jquery 代码包装在 document.ready() 中，并为此目的使用简单的 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 不兼容

jQuery.change() not compatible with addEventListener?

jQuery.change(）与 addEventListener 不兼容