javascript - 无法填写动态生成的输入字段

Question

我在开发项目时遇到了代码问题。我将登录表单动态添加到 DOM 树中的某个 div。一切都很好，生成了所有元素并添加了所有属性，但是我无法访问任何一个字段，更不用说提交了。有人可以在其中发现问题吗？

loginArea.click((e) => {
    e.preventDefault();

    loginArea
        .empty()
        .append(
            $(document.createElement('form'))
                .attr({id: 'user__loginform'})
                .append(
                    $(document.createElement('p'))
                    .addClass('user__action')
                    .text('Please enter your credentials!')
                )
                .append(
                    $(document.createElement('input'))
                    .prop({
                        type: 'email',
                        id: 'login_mail',
                    })
                    .attr({
                        placeholder: 'Please enter a valid e-mail adress!',
                        required: true,
                        form: 'user__loginform'
                    })
                )
                .append(
                    $(document.createElement('input'))
                    .prop({
                        type: 'text',
                        id: 'login_pw',
                    })
                    .attr({
                        placeholder: 'Please enter a password!',
                        minglength: 9,
                        maxlength: 16,
                        required: true,
                        form: 'user__loginform'
                    })
                )
                .append(
                    $(document.createElement('input'))
                    .attr({
                        form: 'user__loginform',
                        type: 'submit',
                        value: 'Login'
                    })
                )
        )
});

非常感谢你提前

编辑：

结合我收到的输入，我将函数缩短为这个，并在最后添加了 .off() 。这似乎解决了我遇到的问题，因为现在可以填写动态生成的输入。

signupArea.click((e) => {
    e.preventDefault();

   let formTemplate = `
        <div id="form-template" class="user__action">
            <form id="user__registform">
                <p>Please enter your preferred credentials!</p>
                <input type="email" id="regist_mail" placeholder="Please enter a valid e-mail!" required="required" form="user__registform">
                <input type="text" id="regist_pw" placeholder="Please enter a password!" minglength="9" maxlength="16" required="required" form="user__registform">
                <input form="user__registform" type="submit" value="Register" class="user__regist--submit">
            </form>
        </div>
    `;
    signupArea.html(formTemplate);
    signupArea.off();
});

标签： javascripthtmljquerycss

Answer 1

问题是因为您已将单击处理程序绑定到loginArea元素，但每次单击该元素或重要的是其中的一个元素时，事件都会冒泡并再次触发事件，这会清除内容并重新插入新鲜form元素。

要解决此问题，您可以添加将表单添加到外部元素的事件loginArea，如下所示：

$('#foo').click((e) => {
  e.preventDefault();

  $('#loginarea')
    .empty()
    .append(
      $(document.createElement('form'))
      .attr({
        id: 'user__loginform'
      })
      .append(
        $(document.createElement('p'))
        .addClass('user__action')
        .text('Please enter your credentials!')
      )
      .append(
        $(document.createElement('input'))
        .prop({
          type: 'email',
          id: 'login_mail',
        })
        .attr({
          placeholder: 'Please enter a valid e-mail adress!',
          required: true,
          form: 'user__loginform'
        })
      )
      .append(
        $(document.createElement('input'))
        .prop({
          type: 'text',
          id: 'login_pw',
        })
        .attr({
          placeholder: 'Please enter a password!',
          minglength: 9,
          maxlength: 16,
          required: true,
          form: 'user__loginform'
        })
      )
      .append(
        $(document.createElement('input'))
        .attr({
          form: 'user__loginform',
          type: 'submit',
          value: 'Login'
        })
      )
    )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo">Click me to add form</button>
<div id="loginarea"></div>

您还应该注意，您用于创建表单的逻辑是不必要的冗长，并且不是很好的关注点分离。

更好的方法是将模板存储在 HTML 中并使用它来创建新的动态内容。这样，如果您将来需要对表单布局进行更改，可以直接在 HTML 中完成。JS 变得完全不依赖于 UI。试试这个：

$('#foo').click((e) => {
  e.preventDefault();

  let formTemplate = $('#form-template').html();
  $('#loginarea').html(formTemplate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo">Click me to add form</button>
<div id="loginarea"></div>

<script type="text/html" id="form-template">
  <form id="user__loginform">
    <p class="user__action">Please enter your credentials!</p>
    <input type="email" id="login_mail" placeholder="Please enter a valid e-mail adress!" required="required" form="user__loginform">
    <input type="text" id="login_pw" placeholder="Please enter a password!" minglength="9" maxlength="16" required="required" form="user__loginform">
    <input form="user__loginform" type="submit" value="Login">
  </form>
</script>