如何通過JQuery觸發JS native甚至addEventListener（“change”，function）

Question

這不是如何在代碼中觸發jQuery更改事件的重復，因為它處理jQuery與jQuery事件偵聽器的交互，而這個問題討論了jQuery與本機事件偵聽器的交互。

我使用addEventListener綁定輸入的change事件，但是$（'#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的.trigger('change')觸發本機事件。 您需要創建一個本機事件並發送它：

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 個解決方案

解決方案1
6 已采納 2016-05-09 10:45:04

解決方案2
1 2016-05-09 10:43:36

如何通過JQuery觸發JS native甚至addEventListener（“change”，function）

問題描述

2 個解決方案

解決方案1 6 已采納 2016-05-09 10:45:04

解決方案2 1 2016-05-09 10:43:36

解決方案1
6 已采納 2016-05-09 10:45:04

解決方案2
1 2016-05-09 10:43:36