javascript - Jquery 在表单验证条件上添加和删除类

Question

我有以下代码，其中添加和删除类，该类用于带来表单的下一阶段，该表单是一步一步的，填充一些字段在下一步验证然后填充其他字段，

按钮:

<input type="button" id="petOwnerStepOne" class="next" value="CONTINUE" />

下面的代码不起作用。

$('#stepOne').click(function() {
  if ($('#FormID').valid()) {
    $( "#stepOne" ).addClass("next");
  } else {
    $( "#stepOne" ).removeClass("next");
  }
});

类添加，但表单永远不会进入第二步，如果没有上述代码并将类添加到 <input class="next">工作正常。

通过以下方式进入表单的下一步:

  $(".next").click(function() {
    if (animating) return false;
    animating = true;
    current_fs = $(this).parent();
    next_fs = $(this)
    .parent()
    .next();
    $("#progressbar li")
    .eq($("fieldset").index(next_fs))
    .addClass("active");
    next_fs.show();
    current_fs.animate(
      { opacity: 0 },
      {
        step: function(now, mx) {
          scale = 1 - (1 - now) * 0.2;
          left = now * 50 + "%";
          opacity = 1 - now;
          current_fs.css({ transform: "scale(" + scale + ")" });
          next_fs.css({ left: left, opacity: opacity });
        },
        duration: 800,
        complete: function() {
          current_fs.hide();
          animating = false;
        },
        easing: "easeInOutBack"
      }
      );
  });

我错过了什么？

Answer 1

改变

$(".next").click(function() {

到

$(document).on("click",".next", function(){ 

因为当你的代码被解析时，DOM 中尚不存在下一个类，这是常见的陷阱

https://learn.jquery.com/events/event-delegation/