jQuery click事件只工作一次（初学者）

Question

我是jQuery的初学程序员，我不明白为什么这个功能第二次无法执行。按钮内容第一次更改，两秒后它返回到先前的状态，第二次我不能做同样的事情。请帮忙！此致

$(document).ready(function() {
  $('#registerButtonM').on('click', function() {
    $(this).attr("disabled", true);

    var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';

    if ($('#passRegisterM').val().length >= 8) {
      $('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
    } else {
      $('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
      setTimeout(function() {
        $('#footerButtonsM').html('');
        $('#footerButtonsM').html(btn);
      }, 2000);
    }
  });
});

编辑： HTML：

<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xs" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Register on TaskSave</h4>
      </div>
      <div class="modal-body">
      <form method="post" action="">
        <div class="row">
          <div class="col-xs-12">
            <div class="register-input">
              <p>User <span class="" id="vUserM"></span></p>
              <input type="text" placeholder="John" name="user" id="userRegisterM" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="register-input">
              <p>E-mail <span class="" id="vEmailM"></span></p>
              <input type="text" placeholder="mail@example.com" name="email" id="emailRegisterM" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="register-input">
              <p>Password <span class="" id="vPassM"></span></p>
              <input type="password" placeholder="password" name="pass" id="passRegisterM" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 register-captcha">
            <div class="g-recaptcha" data-sitekey=""></div>
          </div>
        </div>
      </div>
      <div class="modal-footer" id="footerButtonsM">
        <button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

将您的bindIp = [127.0.0.1, 192.168.184.155, 96.88.169.145] HTML更改为

#footerButtonsM

和你的jquery代码：

  <div class="modal-footer" id="footerButtonsM">
    <i class="fa fa-spin fa-circle-o-notch" style='display:none'></i>
    <button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
  </div>

结果将是相同的，但方法更好。

Answer 2

这不起作用的原因是您在单击按钮时删除按钮。这导致它不再被绑定。

执行：$('#footerButtonsM').html('');时，这会从dom对象中删除该按钮，并且您将丢失已设置的早期绑定。

然后，当您执行$('#footerButtonsM').html(btn);

时，在页面上放回另一个按钮

由于这是一个全新的按钮，因此它不再受您设置的点击处理程序的约束。

您有几种方法可以解决此问题。您可以重新绑定或新的单击处理程序，无论是早期绑定还是后期绑定到新按钮。

快速解决方法是通过更改：

将其更改为延迟绑定

$('#registerButtonM').on('click', function() {

是：

 $(document).on('click', '#registerButtonM', function() {

以下是此工作的fiddle

Answer 3

要设置后期绑定，请更改

 $('#registerButtonM').on('click', function() {

对此：

 $(document).on('click', '#registerButtonM', function() {

Answer 4

由于你已经从DOM中删除了html按钮，因此onclick处理程序是autmotically garbaged（这是有道理的，因为存在的元素不存在）。

另一种方法是声明和函数名为clicker ..当您删除并插入html时，只需将函数点击器添加到新按钮

请参阅下面的代码段

function clicker() {
  $(this).attr("disabled", true);

  var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';

  if ($('#passRegisterM').val().length >= 8) {
    $('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
  } else {
    $('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
    setTimeout(function() {
      $('#footerButtonsM').html('');
      $('#footerButtonsM').html(btn);
      $("#registerButtonM").on('click', clicker)
    }, 2000);
  }
}
$(document).ready(function() {
  $('#registerButtonM').on('click', clicker);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xs" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Register on TaskSave</h4>
      </div>
      <div class="modal-body">
        <form method="post" action="">
          <div class="row">
            <div class="col-xs-12">
              <div class="register-input">
                <p>User <span class="" id="vUserM"></span></p>
                <input type="text" placeholder="John" name="user" id="userRegisterM" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="register-input">
                <p>E-mail <span class="" id="vEmailM"></span></p>
                <input type="text" placeholder="mail@example.com" name="email" id="emailRegisterM" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="register-input">
                <p>Password <span class="" id="vPassM"></span></p>
                <input type="password" placeholder="password" name="pass" id="passRegisterM" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 register-captcha">
              <div class="g-recaptcha" data-sitekey=""></div>
            </div>
          </div>
      </div>
      <div class="modal-footer" id="footerButtonsM">
        <button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
      </div>
      </form>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->