使用 getElementsByClassName() 获取元素时添加 EventLinster

Question

我有一些从我的后端呈现的信息是：

此片段生成为一个数组，其中每个此类片段的表单元素都具有相同的 class，唯一发生变化的值是复选框的值属性，该属性被隐藏并包含名称事件

我想为片段的每个此类表单元素添加一个事件侦听器

var linkForm = document.getElementsByClassName("linkForm");
for (n = 0; n < linkForm.length; n++) {
  linkForm[n].addEventListener("submit", (event) => {
    event.preventDefault()
    const eventName = event.target.check.value;
    const link = event.target.linkInput.value;
    console.log(eventName, link, uid, email)
    const uploadLink = async() => {
      const response = await fetch(
        '/uploadLinks', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            event: eventName,
            link,
            email,
            uid
          })
        }
      );
      const resData = await response.json();
      if (ressData.token === 'done') {
        window.alert('That was a lot of work! well Done! link is uploaded')
      }
    }
    uploadLink()
  })
}

<div>
  <button class="accordion">EventName</button>
  <div class="panel">
    <form class="linkForm">

      <input type="checkbox" name="check" value="EventName" checked/>
      <input name="linkInput" type="text" placeholder="Upload Your G-Drive Link" />

      <button type="submit" class="btn-submit">upload</button>
    </form>
  </div>
</div>

但是点击提交按钮后页面刷新，即使我设置了 event.preventDefault()。

编辑

片段是从后端获取的，因此加载需要一段时间

Answer 1

提交事件的事件侦听器应添加到表单本身。然后 event.preventDefault() 将起作用。我将 uploadLink 函数移到了事件侦听器回调之外。那么它也可以用在其他情况下。

我将您的 URL 更改为表示来自服务器的 JSON 对象的数据 URI，以便您可以看到它有效。

var sendbtn = document.getElementById('sendbtn');
var linkForm = document.forms.linkForm;

sendbtn.addEventListener('click', e => {
  uploadLink('test', 'link');
});

const uploadLink = async(eventName, link) => {
  // this will be returned: {"token":"done","somevalue":12}
  let response = await fetch(
    'data:application/json;base64,eyJ0b2tlbiI6ImRvbmUiLCJzb21ldmFsdWUiOjEyfQ==', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        event: eventName,
        link: link
      })
    });
  let resData = await response.json();
  if (resData.token === 'done') {
    window.alert('That was a lot of work! well Done! link is uploaded');
    linkForm.valuefromajax.value = resData.somevalue;
    linkForm.fs1.disabled = false;
  }
};


document.forms.linkForm.addEventListener("submit", event => {
  event.preventDefault()
  let eventName = event.target.check.value;
  let link = event.target.linkInput.value;
  let somevalue = event.target.valuefromajax.value;
  console.log(eventName, link, somevalue);
});

<button id="sendbtn">Send AJAX request</button>
<form name="linkForm">
  <fieldset name="fs1" disabled>
    <input type="text" name="valuefromajax"/>
    <input type="checkbox" name="check" value="EventName" checked/>
    <input name="linkInput" type="text" placeholder="Upload Your G-Drive Link" />
    <button class="btn-submit">upload</button>
  </fieldset>
</form>

Answer 2

@chrwahl 提供的解决方案确实更简洁，但问题根本不是事件侦听器。在我的问题的编辑部分中，我提到那些 HTML 片段是从后端获取的，因此存在延迟，整个脚本甚至在 HTML 部分存在之前就已执行。因此 linkForm 总是被赋值为 null。我在解决问题的 fetch 语句之后创建了 addEventListener 部分 –

使用 getElementsByClassName() 获取元素时添加 EventLinster

adding EventLinsters when getting element using getElementsByClassNames()

javascript

addeventlistener