Question

我想创建一个动态调查表，动态加载下一个问题，但是当我加载第二个问题时，按钮 next2 的事件不会像没有事件那样响应。 / p>

我认为这是因为我使用JavaScript函数加载了输入。我必须做什么才能使其正常工作？

$(document).ready(function() {
  var question2 = `
            <form>
               <input type="number" id="age" placeholder="age">
        <input type="submit" id="next2">
            </form>
          `;
  var question3 = `
            <form>
              <input type = "email" id="email" placeholder="email">
               <input type="submit" id="next3">
              </form>
              `;

  $('#next').click(function(e) {
    e.preventDefault();
    console.log(1);
    $(".questions").html(question2);
  });
  $("#next2").click(function(e) {
    e.preventDefault();
    $(".questions").html(question3);
  });
  $("#next3").click(function() {
    alert('Cool');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="questions">
  <form>
    <input type="text" id="name" placeholder="Name">
    <button type="submit" value="Next" id="next">Next</button>
  </form>
</div>

</html>

Answer 1

您应该使用$(document)。它是文档中任何单击事件的功能触发器。然后在内部可以使用jquery on("click","#idname",somefunction)，其中第二个参数指定要定位的特定元素。在这种情况下，体内的每个元素。

 $(document).on('click', '#next', function(e) {
    e.preventDefault();
    $(".questions").html(question2);
  });

Answer 2

您只需一个事件处理程序即可，而不是多个。

您正在将HTML插入questions类为$(".questions").html的元素中。假设您应该使用questions类将事件处理程序挂接到该元素，以使其尽可能接近该元素（不要使其遍历整个DOM在事件中寻找事物。

在这里，我将CURRENT html保存到myApp，我创建该html是为了容纳东西而不污染全局名称空间；然后我最后循环回到它。奇怪的是，您同时提交了button和input类型的提交，但我也可以处理。由于这些是表单中的提交按钮，因此我添加了submit事件，以防触发该事件。

$(function() {
  let myApp = {};

  myApp.question2 = ` <form>I am 2
    <input type="number" id="age" placeholder="age">
    <input type="submit" id="next2"  data-nextthing="question3">
  </form>
`;
  myApp.question3 = ` <form>I am 3
   <input type = "email" id="email" placeholder="email">
   <input type="submit" id="next3"  data-nextthing="question1">
 </form>
 `;

  myApp.question1 = $(".questions").html(); // just to store it
  $(".questions")
    .on('click submit', 'form, button[type="submit"], input[type="submit"]', function(event) {
      event.preventDefault()
      let d = $(this).data('nextthing');
      $(event.delegateTarget).html(myApp[d]);
      return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="questions">
  <form>
    <input type="text" id="name" placeholder="Name">
    <button type="submit" value="Next" id="next" data-nextthing="question2">Next</button>
  </form>
</div>

如何处理动态元素中的事件？

2 个答案: