Así que hice una pequeña versión de mi problema. Aquí estoy agregando texto en un elemento de entrada. Pero cuando se agrega, no activa el detector de eventos.
function testFunction() { document.getElementById("testInput").addEventListener("change", () => { console.log("hi"); }); } function testText() { document.getElementById("testInput").value = "Hello there"; } testFunction(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Document</title> </head> <body> <script></script> <button onclick="testText()" style="height: 20px"></button> <input id="testInput" /> <script src="script.js"></script> </body> </html>Debe crear el evento manualmente y usar el método dispatchEvent() para activar el evento en el elemento de destino.
function testFunction() { document.getElementById("testInput").addEventListener("input", () => { console.log("hi"); }); } function testText() { document.getElementById("testInput").value = "Hello there"; let event = new Event("input"); document.getElementById("testInput").dispatchEvent(event); } testFunction(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Document</title> </head> <body> <script></script> <button onclick="testText()" style="height: 20px"></button> <input id="testInput" /> <script src="script.js"></script> </body> </html>