如何使用 Modal Bootstrap 确认删除是/否？答案

【问题标题】：How to use Modal Bootstrap to confirm delete yes/no?如何使用 Modal Bootstrap 确认删除是/否？
【发布时间】：2018-05-09 13:44:04
【问题描述】：

我有一个模式框，可以确认用户是否要删除记录。到目前为止，我得到了这个工作，但我在函数内部有函数。正如我在 JavaScript 中所知道的那样，不建议这样做，所以我想知道是否有另一种解决方案可以避免这个问题？这是一个例子：

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "mjohnson@gmail.com",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "jdunn@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "lmorgan@gmail.com",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "kbradley@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "dhart@gmail.com",
      "position": "Supervisor"
    }
  ]
};

$(document).ready(function() {
  generateTbl();
});

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#customers_data').empty().append(buildTbl);
  buildDataTable('customers', [5], 5);
}

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

$('#customers_data').on('click', ':button.customer_delete', deleteCustomer);

function deleteCustomer() {
  var recordID = $(this).closest('tr').attr('id'), // Get record ID.
    targetTr = $(this).parents('tr');

  $('#deleteModal').modal('show'); // Show delete modal box.
  $('.confirm_delete').on('click', function() {
    if (recordID) {
      var table = $('#customers').DataTable(); // Select DataTable by ID.
      table.row(targetTr).remove().draw(); // Remove record from DataTable.
    }
  });
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: JS and CSS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />


<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">Welcome to Main Page</div>
    <div class="panel-body">
      <div id="customers_data" class="table-responsive"></div>
    </div>
  </div>
</div>
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirm Delete</h4>
      </div>
      <div class="modal-body" id="delete_modalBody">
        <p>You are about to delete customer record, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
        <p class="debug-url"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default confirm_delete" data-dismiss="modal">Delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

如果有人知道更好的解决方案，请告诉我。

【问题讨论】：

唯一能让它变得更好的方法就是不使用 jquery，除此之外，我看不出有什么问题吗？
@mast3rd3mon 你能解释一下如果没有 JQuery 会更好吗？我正在寻找任何更好/更有效的建议。
jquery 只是一个庞大的库，具有可怕的命名约定 ($)。如果我想要多个页面、服务等，我个人只会用 vanilla js 或 angular 编写它

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

在函数范围之外定义您的recordID。

在函数内部更新它的值，然后您就可以在函数中的任何地方使用它，当您能够这样做时，您可以将您的函数移出处理点击事件的函数

这里

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "mjohnson@gmail.com",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "jdunn@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "lmorgan@gmail.com",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "kbradley@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "dhart@gmail.com",
      "position": "Supervisor"
    }
  ]
};

$(document).ready(function() {
  generateTbl();
});
var recordID = null;

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#customers_data').empty().append(buildTbl);
  buildDataTable('customers', [5], 5);
}

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

$('#customers_data').on('click', ':button.customer_delete', deleteCustomer);

function deleteCustomer() {
 recordID = $(this).closest('tr').attr('id'), // Get record ID.
    targetTr = $(this).parents('tr');
  $('#deleteModal').modal('show');  

}
  $('.confirm_delete').on('click', function() {
    if (recordID) {
      var table = $('#customers').DataTable(); // Select DataTable by ID.
      table.row(targetTr).remove().draw(); // Remove record from DataTable.
    }
  });

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hearing Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- *** Start: JS and CSS for DataTables. *** -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
  <!-- *** End: JS and CSS for DataTables. *** -->
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">Welcome to Main Page</div>
      <div class="panel-body">
        <div id="customers_data" class="table-responsive"></div>
      </div>
    </div>
  </div>
  <div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Confirm Delete</h4>
        </div>
        <div class="modal-body" id="delete_modalBody">
          <p>You are about to delete customer record, this procedure is irreversible.</p>
          <p>Do you want to proceed?</p>
          <p class="debug-url"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default confirm_delete" data-dismiss="modal">Delete</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

问题是每次单击删除button 时都会绑定on click 事件。这是错误

这是一个可行的解决方案

var myJSON = {
  "customers": [{
    "id": 100,
    "first": "Mike",
    "last": "Johnson",
    "email": "mjohnson@gmail.com",
    "position": "Consultant"
  }, {
    "id": 101,
    "first": "John",
    "last": "Dunn",
    "email": "jdunn@gmail.com",
    "position": "Programmer"
  }, {
    "id": 109,
    "first": "Lisa",
    "last": "Morgan",
    "email": "lmorgan@gmail.com",
    "position": "Secretary"
  }, {
    "id": 233,
    "first": "Kris",
    "last": "Bradley",
    "email": "kbradley@gmail.com",
    "position": "Programmer"
  }, {
    "id": 57,
    "first": "Dave",
    "last": "Hart",
    "email": "dhart@gmail.com",
    "position": "Supervisor"
  }]
};

$(document).ready(function() {
  generateTbl();
});

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#customers_data').empty().append(buildTbl);
  buildDataTable('customers', [5], 5);
}

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

$('#customers_data').on('click', ':button.customer_delete', deleteCustomer);

var recordID,
  targetTr;

function deleteCustomer() {
  recordID = $(this).closest('tr').attr('id'); // Get record ID.
  targetTr = $(this).parents('tr');

  $('#deleteModal').modal('show'); // Show delete modal box.

}

$('.confirm_delete').on('click', function() {
  if (recordID) {
    console.log('test');
    var table = $('#customers').DataTable(); // Select DataTable by ID.
    table.row(targetTr).remove().draw(); // Remove record from DataTable.
  }
});

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: JS and CSS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />


<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">Welcome to Main Page</div>
    <div class="panel-body">
      <div id="customers_data" class="table-responsive"></div>
    </div>
  </div>
</div>
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirm Delete</h4>
      </div>
      <div class="modal-body" id="delete_modalBody">
        <p>You are about to delete customer record, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
        <p class="debug-url"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default confirm_delete" data-dismiss="modal">Delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

【讨论】：