bootstrap确认选择项目中的模态框不起作用

Question

我在发送表单数据之前有show detect delete消息的代码：

$('input[name="submit"]').on('click', function (e) {
    var $form = $(this).closest('form');
    var checked = $("input:checked").length;
    var action = $('select[name="todo"]');


    if (action.val() === "delete" && checked) {

        e.preventDefault();
        $('#confirm').modal({
            backdrop: 'static',
            keyboard: false
        })
            .one('click', '#delete', function (e) {
            $form.trigger('submit');
        });
    }
});

当我尝试这个时，它不起作用。在模式框中单击删除后，不会发送/提交表单。我怎样才能解决这个问题？

DEMO

 $('input[name="submit"]').on('click', function(e) {
   var $form = $(this).closest('form');
   var checked = $("input:checked").length;
   var action = $('select[name="todo"]');


   if (action.val() === "delete" && checked) {

     e.preventDefault();
     $('#confirm').modal({
         backdrop: 'static',
         keyboard: false
       })
       .one('click', '#delete', function(e) {
         $form.trigger('submit');
       });
   }
 });

<div class="panel-body">
  <form method="POST" role="form" action="#">
    <div class="row margin-bt-15">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <select name="todo" class="contentgroup">
          <option value="">choose</option>
          <option value="delete">delete</option>
          <option value="mark">mark</option>
          <option value="unmark">unmark</option>
        </select>
        <input type="hidden" name="csrf_token" value="MTQzNjU3MDc3NjZPNXFKUmZWVlJWcE9ZNnd4VUZFbmRiSzMzSTZwMzRD">
        <input type="submit" value="ok" class="btn btn-primary btn-sm" name="submit" />
      </div>
    </div>
</div>
<input type="checkbox" name="selected[]" class="check" value="4" />
</form>
</div>
<div id="confirm" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">delete</h4>
      </div>
      <div class="modal-body text-center">
        <i class="fa fa-exclamation-triangle text-danger fa-lg flashitmap"></i> 
        <label>message</label>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm" id="delete"><i class="fa fa-trash"></i>delete</button>
        <button type="button" data-dismiss="modal" class="btn btn-sm">back</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->