Почему мой ручной триггер событий не работает при динамически генерируемых входных данных формы? ⇐ Javascript

[Anonymous]

Я работаю над проектом, который динамически генерирует входные данные формы, которые добавляются в оболочку моей формы. Я исследовал эту проблему и нашел решение, включающее new Event('change', { bubbles: true }), но у меня оно не сработало. Я также пытался вручную вызвать событие onchange для оболочки формы, вот так, но это тоже не сработало.
Вот часть моего кода, в которой вводятся входные данные. создано:

Код: Выделить всё

get image() {
return {
emoji: {
key: "Arxa fon şəkili (emoji)",
typeof: "component",
render: "string",
component: createElement(
"div",
{
title: "Arxa fon şəklini emojidən seç",
width: "100%",
},
createElement(TextField, {
id: "selectEmoji",
name: "options.plugins.image.emoji",
size: "small",
}),
createElement(EmojiPicker, {
width: "100%",
onEmojiClick: (emoji, event) => {
const el =
event.target.ownerDocument.playgroundForm.querySelector(
"#selectEmoji"
);
el.value += emoji.emoji;
el.focus();
el.dispatchEvent(
new Event("input", {
bubbles: true,
cancelable: false,
})
);
},
})
),
data: this.options?.plugins?.image?.emoji,
},
position: this.position(this.options?.plugins?.image?.position),
};
}

Все входные данные динамически добавляются внутри этой оболочки:

Код: Выделить всё

А вот метод updateOption, используемый для изменения состояния:

Код: Выделить всё

  const updateOption = (e) => {
const updatedObj = { ...store.charts[store.current].options };
let value = "";

if (e.target.hasOwnProperty("checked")) {
value = e.target.checked;
} else {
value = e.target.value;
}

set(updatedObj, e.target.name, value);

dispatch({
type: "EDIT_CHART",
payload: {
changed: {
key: e.target.name,
val: value,
},
options: updatedObj,
},
});
};

Может ли кто-нибудь объяснить, почему ручной триггер не работает, или предложить альтернативный способ добиться этого?


Подробнее здесь: https://stackoverflow.com/questions/793 ... orm-inputs