javascript - 无法使用 javaScript 从动态创建的 html 表单中获取表单值

Question

我使用 javaScript 创建了一个 html 表单，我使用 innerHTML 将它放入 DOM，但是当表单提交时没有任何反应。我在输入字段上放置按钮和按键事件的 addevent 侦听器也不会被触发。

这是我动态生成的表格

   function playerFinderhtmlCreater (){
    
    
    
        return `<section class="moviesForm mt-4 mb-2">
        <div class="container">
          <div class="text-center">
            <h2>Search for your favourite Cricket Star </h2>
            <p class="lead text-muted">Find Info about you top Favourite Cricket Star </p>
          </div>
          <div class="row justify-content-center align-items-center">
            <div class="col-md-8">
              <div class="input-group mb-0">
                <span class="input-group-text" id="basic-addon2"
                  ><i class="bi bi-film text-danger"></i
                ></span>
                <input
                  type="text"
                  class="form-control form-control-lg"
                  placeholder="Movie Title"
                  aria-label="Recipient's username"
                  aria-describedby="basic-addon2"
                />
      
                <button class="btn btn-dark">Search</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <section class="main">
        <div class="container">
          <div class="row justify-content-center align-items-center">
            <div class="col-10 col-md-4 special"></div>
          </div>
        </div>
      </section>
      `

}

下面的代码显示了我如何从表单中获取值并将其传递给另一个函数

let getForm = document.querySelector('.form-control');

let getDark = document.querySelector('.btn-dark');
let getCard = document.querySelector('.special');
if (getForm) {
    alert("Asdasd")
  getForm.addEventListener('keypress', (e) => {
    if (e.keyCode == 13) {

   
   
            finalPlayerFinder(getForm.value);
    
    
  
      getForm.value=""
    }
  });
}

if (getDark) {
  getDark.addEventListener('click', () => {
 
        finalPlayerFinder(getForm.value);


     
    getForm.value=""
  });
}

在这里我得到表单值并控制台记录它。

let finalPlayerFinder = (playerName)=>{

console.log(playerName)


}

标签： javascriptnode.jsexpressweb-frontend