Question

这不是How to trigger jQuery change event in code的重复，因为它处理jQuery与 jQuery 事件监听器的交互，而这个问题讨论了jQuery与的交互原生事件监听器。

我使用 addEventListener 绑定输入的更改事件，但 $（'#input'）。val（'bbbb'）。change（）; 可以触发警报，如何通过JQuery触发addEventListener（“更改”，函数）函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>code</title>
</head>

<body>
    <script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>

    <input id="input" type="text" value="input" />
    <script type="text/javascript">
        document.getElementById("input").addEventListener("change", function() {
        alert(this.value);
    });
    </script>

    <input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" />
</body>

</html>

Answer 1

您无法使用jQuery＆＃39; .trigger('change')触发本机事件。您需要create a native event和dispatch it：

var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
//            ^         ^     ^
//            |         |     cancelable
//            |         bubbles
//            type

然后解雇它：

var el = document.getElementById("input");
el.dispatchEvent(evt);

Answer 2

使用jquery绑定更改事件。

$("#input").change(function() {
  alert(this.value);
});

工作片段：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>code</title>
</head>

<body>
    <script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>

    <input id="input" type="text" value="input" />
    <script type="text/javascript">
      $( "#input" ).change(function() {
        alert(this.value);
      });
    </script>

    <input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" />
</body>

</html>

如何通过JQuery触发JS native甚至addEventListener（“change”，function）

2 个答案: