JQuery：检测单击了哪个提交按钮

Question

我知道这个问题听起来很像其他一些人，但我是新手，我无法在任何地方找到合适的解决方案。我有一个添加到篮子形式，有多个提交按钮。我想让多供应商客户有机会根据他们的选择添加不同的产品。

我发现如果我创建一个.submit（）处理程序，我似乎无法访问实际点击的按钮。

这是尝试使用按钮.click（）处理程序的代码的最新迭代：

$('#button-cart').on('click', function() {
  $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
    dataType: 'json',
    beforeSend: function() {
      $('#button-cart').button('loading');
    },
    complete: function() {
      $('#button-cart').button('reset');
    },
    success: function(json) {
      $('.alert-dismissible, .text-danger').remove();
      $('.form-group').removeClass('has-error');

      if (json['error']) {
        if (json['error']['option']) {
          for (i in json['error']['option']) {
            var element = $('#input-option' + i.replace('_', '-'));

            if (element.parent().hasClass('input-group')) {
              element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
            } else {
              element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
            }
          }
        }

        if (json['error']['recurring']) {
          $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
        }

        // Highlight any found errors
        $('.text-danger').parent().addClass('has-error');
      }

      if (json['success']) {
        $('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');

        $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

        $('html, body').animate({
          scrollTop: 0
        }, 'slow');

        $('#cart > ul').load('index.php?route=common/cart/info ul li');
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="product">
   <h3>Available Options</h3>
   <div class="form-group scrolly  required ">
      <div id="input-option230">
         <div class="radio" style="display: inline-block;">
            <label>
            <input type="radio" name="option[230]" value="32">
            Pink </label>
         </div>
         <div class="radio" style="display: inline-block;">
            <label>
            <input type="radio" name="option[230]" value="31">
            Green </label>
         </div>
         <div class="radio" style="display: inline-block;">
            <label>
            <input type="radio" name="option[230]" value="30">
            Blue </label>
         </div>
         <div class="radio" style="display: inline-block;">
            <label>
            <input type="radio" name="option[230]" value="33">
            Red </label>
         </div>
      </div>
   </div>
   <div class="form-group required ">
      <div id="input-option229">
         <input type="hidden" name="product_id" value="53">
         <table>
            <thead>
               <tr>
                  <th>Bra Size</th>
                  <th>Price</th>
                  <th>Qty</th>
                  <th></th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td style="padding: 0 10px;">
                     <div class="checkbox">
                        <label>
                        <input type="checkbox" name="option[229][]" value="26">
                        70B </label>
                     </div>
                  </td>
                  <td>(-2$)</td>
                  <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td>
                  <td><button type="button" id="button-cart-229-25" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
               </tr>
               <tr>
                  <td style="padding: 0 10px;">
                     <div class="checkbox">
                        <label>
                        <input type="checkbox" name="option[229][]" value="27">
                        75B </label>
                     </div>
                  </td>
                  <td>(-1$)</td>
                  <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td>
                  <td><button type="button" id="button-cart-229-26" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
               </tr>
               <tr>
                  <td style="padding: 0 10px;">
                     <div class="checkbox">
                        <label>
                        <input type="checkbox" name="option[229][]" value="28">
                        80B </label>
                     </div>
                  </td>
               </tr>
               <tr>
                  <td style="padding: 0 10px;">
                     <div class="checkbox">
                        <label>
                        <input type="checkbox" name="option[229][]" value="29">
                        85B </label>
                     </div>
                  </td>
                  <td>(+1$)</td>
                  <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td>
                  <td><button type="button" id="button-cart-229-27" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <div class="form-group hidden">
      <label class="control-label" for="input-quantity">Qty</label>
      <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control">
      <input type="hidden" name="product_id" value="53">
      <br>
      <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block">Add to Cart</button>
   </div>
</div>

除了在每个按钮上应用.click（）事件之外，有没有办法确定单击了哪个提交按钮？

Answer 1

更改课程的ID并使用this来识别您点击的按钮，如下所示：

$('.button-cart').on('click', function() {
     $(this).button('loading');
});