Question

在我的rails应用程序中，我有按钮向服务器提交信息。有些按钮是表单的一部分，有些则不是。我正在寻找一种方法来应用我的jquery，它会在点击后禁用按钮。

这是我目前的jquery：

  $('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

此代码添加了一个图标，禁用按钮并使文本不可见。我已经将禁用功能扩展为锚定标记，如https://stackoverflow.com/a/16788240/4584963

所述

示例链接：

<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10">
  <span class="btn-label">Approve</span>
</a>

示例表单：

<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post">
      <div class="form-group">
        <input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name">
      </div>
      <div class="form-group">
        <input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name">
      </div>
      <div class="form-group">
        <input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email">
      </div>
      <div class="form-group">
        <input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
      </div>                
      <div class="form-groups">
        <input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
      </div>
      <button name="button" type="submit" class="btn btn btn-primary btn-disabler">
        <span class="btn-label">Submit</span>
      </button>
</form>

上方的jquery不适用于表单。在单击时，按钮会更改，但没有提交。为了让jquery为表单工作，我需要将其更改为：

  $('.signup-form').on('submit', function() {
    $(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

如何合并此选项以应用于链接和表单提交按钮？好像我的问题源于链接需要click事件，而表单需要提交事件。

Answer 1

将提交按钮视为表单提交事件的扩展。如果禁用表单提交按钮，则表单提交事件将被禁用。你可以做的是将类添加到表单，然后在您的jQuery代码中，您可以分配特定的规则。像这样......

所以，使用这个HTML：

<form class="disabler">
  <button type="submit"><span>Label</span></button>
  </form>

<a href="#" class="disabler"><span>Label</span></a>

<button class="disabler"><span>Label</span></button>

使用此javascript：

$('.disabler').each(function(e){
 if(this.nodeName == "A"){
    // this is a hyperlink... 
    // apply css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "BUTTON") {
    //this is a button outside of a form
    // disable and add css class
    $(this).on('click', function(){          
        //some action
        });

 } else if (this.nodeName == "FORM") {
    $(this).on('submit', function(){
    $(this).find('button[type="submit"]')
      .append("<i>Loading</i>")
      .disable();
       });
    }

 });

你可以更多地重构这个，但我认为当你试图对每个组件应用不同的规则时，你应该注意nodeName。

我希望这能回答你的问题。

Answer 2

您可以使用jQuery is()检查当前按钮对象的父级是否为表单，以便提交表单：

$('.btn-disabler').on('click', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    if ($(this).parent().is("form")) $(this).parent().submit();
});

Answer 3

你是否使用像

这样的形式的id来尝试这个

$('#new_user').on('submit' ...

或使用表单元素

$('form').on('submit' ...

jquery禁用提交/单击表单和链接上的按钮

3 个答案: