單擊偵聽器僅觸發一次，其中包含渲染方法

Question

我在一個按鈕上有一個點擊監聽器，它使用渲染方法重置 div 的 innerhtml。 每次單擊時，單擊偵聽器都會觸發渲染，而其中的渲染則不會。

我試過刪除 html 標記和所有外部 function 調用，仍然是同樣的問題

為什么渲染會阻止射擊，或者為什么會有任何東西阻止它射擊（不止一次）？

設置：從 deno 捆綁 js

const myTemplate = (formData: HCPConfig) => {
  return html` ... `;}

//byId just returns an el or throws an error
const rootEl = byId("form"); 
function render(el: Element, content: string) {
  el.innerHTML = content;
 
}
render(rootEl, myTemplate(formData)); //this renders fine on page load
const action = byId("submitty");

action.addEventListener("click", function (e: Event) {
  console.log(e);
  //this prevents the event listener from firing more than once
  render(rootEl, myTemplate(formData)); 
 
});

Answer 1

如果#submitty按鈕位於#form元素內，則您將使用該內容覆蓋按鈕和#form的所有其他內容。 您應該只通過在表單中創建 div 或其他元素來覆蓋表單的一部分。

Answer 2

我可以通過將附加了 clicklistener 的按鈕放在重新渲染的項目之外來解決這個問題。

const ssFormCtl = (content = "Submit"): string => {
  return html`<button type="button" class="btn btn-primary" id="submitty">
    ${content}
  </button>`;
};
const myTemplate = (formData: HCPConfig) => {
  return html` ... `;}

//byId just returns an el or throws an error
const rootEl = byId("form"); 
const ctlEl = byId("ssFormCtl");
function render(el: Element, content: string) {
  el.innerHTML = content;
 
}
render(rootEl, myTemplate(formData)); 
render(ctlEl, ssFormCtl());
const action = byId("submitty");

action.addEventListener("click", function (e: Event) {
  console.log(e);
  render(rootEl, myTemplate(formData)); 
 
});