在 Chrome 中工作的 jQuery 代码 - 在 Safari 中不工作

Question

我的 jQuery (jquery-1.12.4) 代码在 Safari 中出现问题，但在 Chrome 中没有。提交表单时，使用 Safari 时会调用切换默认操作。该代码在 Chrome 中按预期工作。开发者控制台中没有出现错误，只记录了Notice: No submit action detected!。

$("form").submit(function (event) {
  // check acal-position-container for children
  if($('.acal-position-container').has('div').length < 1){
    alert("You cannot submit an empty form.\n\nIf you want to delete the current day, use the Delete button without removing any current positions.");
    return false;
  }

  // create the form_action post variable to decide what post action will be executed on the server
  var form_action = $("<input>").attr("type", "hidden").attr("name", "submit_type");
  // unset any old action properties (in case of a cancelled user action)
  $('form').append($(form_action).val(''));
  // confirm various actions
  switch ( $('button:focus').val() ) {
    case 'delete':
      $('form').append($(form_action).val('delete'));
      return confirm("Delete all positions for this day?");
    case 'publish':
      $('form').append($(form_action).val('publish'));
      return confirm("Publish all positions for this day?");
    case 'draft':
      $('form').append($(form_action).val('draft'));
      return confirm("Save all positions for this day as a draft?");
    default:
      console.log('Notice: No submit action detected!');
  }

});

html

<button name="submit" type="submit" value="draft" class="acal-confirm" title="Do not make available publically">Save draft</button>
<button name="submit" type="submit" value="publish" class="acal-confirm" title="Save and publish the positions publically">Publish</button>
<button name="submit" type="submit" value="delete" class="acal-confirm" title="Delete the positions for this day">Delete day</button>

知道问题是什么吗？

谢谢。

编辑：根据要求，更多html

<form action="http://acal.dev/acal/calendar/project_positions/update_position/2/2" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="running_day" value="1" style="display:none;" />
<input type="hidden" name="project_id" value="2" style="display:none;" />

<div class="form-inline pos-control-menu cal-card-hover">
  <h2>Project: Test</h2>
  <div class="form-group">
    <label style="margin-right:10px;">Select day</label>
    <select  id="select_day" style="margin-right:10px;" class="form-control input-lg">
        <option value="1">Monday</option>
        <option value="2">Tuesday</option>
        <option value="3">Wednesday</option>
        <option value="4">Thursday</option>
        <option value="5">Friday</option>
        <option value="6">Saturday</option>
        <option value="0">Sunday</option>
    </select>
  </div>
  <!-- Action buttons -->
  <button name="submit" type="submit" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button>
  <button name="submit" type="submit" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button>
  <button name="submit" type="submit" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button>
</div>

<!-- POSITION CARD CONTAINER -->
<div class="acal-position-container">
    <div class="acal-card-container">

  <input type="hidden" name="id[]" value="5">
  <div class="acal-card cal-card-hover">
    <div style="text-align:right;margin-bottom:10px;">
      <a href="javascript:;" class="remove-position-card"><strong>Remove position </strong><span class="glyphicon glyphicon-remove"></span></a>
    </div>
    <div class="row">
      <div class="form-group col-sm-6">
        <label for="title[]">Title (required)</label><input type="text" name="title[]" value="Monday&#039;s steps"  class="form-control" required />
      </div>
      <div class="form-group col-sm-6">
        <label for="max_vol[]">Maximum participants needed</label><input type="number" name="max_vol[]" value="2" min="1" max="999" class="form-control"  />
      </div>
    </div>
    <div class="form-group">
      <label for="description[]">Description</label><textarea name="description[]" cols="40" rows="10"  style="height:100px;" class="form-control">The description...</textarea>
    </div>
  </div>

</div>
</div>

<input type="button" id="add_position_card" style="margin-top:15px;" class="btn btn-success btn-lg btn-block" value="Add position">
</form>  

Answer 1

感谢@vi5ion 在提交按钮单击时调用函数的想法。这是我使用的代码。

/* Submit form event 
---------------------------------------------------------------------------- */
$('button[type="submit"]').click(function() {
    // check if any positions exist (ie, user has not removed all the positions)
    $("form").submit(function (event) {
        // check acal-position-container for children
        if($('.acal-position-container').has('div').length < 1){
            alert("You cannot submit an empty form.\n\nIf you want to delete the current day, use the Delete button without removing any current positions.");
            //event.preventDefault();
            return false;
        }
    });

    // create the form_action post variable to decide what post action will be executed on the server
    var form_action = $("<input>").attr("type", "hidden").attr("name", "submit_type");
    // unset any old action properties (in case of a cancelled user action)
    $('form').append($(form_action).val(''));
    // confirm various actions
    switch ( this.value ) {
        case 'delete':
            $('form').append($(form_action).val('delete'));
            return confirm("Delete all positions for this day?");
        case 'publish':
            $('form').append($(form_action).val('publish'));
            return confirm("Publish all positions for this day?");
        case 'draft':
            $('form').append($(form_action).val('draft'));
            return confirm("Save all positions for this day as a draft?");
        default:
            console.log('Notice: No submit action detected!');
    }

});