在显示之前，Bootstrap确认需要两次点击？

时间：2018-05-08 20:34:24

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

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', '#customers :button.customer_delete', deleteCustomer);

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

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: 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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.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>
</body>

</html>

正如您在我的示例中看到的，第一次单击“删除按钮”对话框未显示。第二次会显示。第一次点击时没有显示对话框的原因是什么？我不确定是否必须对动态构建的表做任何事情？如果有人知道解决方案，请告诉我。

2 个答案:

答案 0 :(得分：4)

您应该在单击按钮之前创建确认，但如果您必须这样做，请在创建确认后添加$(this).confirmation('show') ..这段代码使其有效：

＆＃13;
＆＃13; 
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');
    

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: function() {
      if (recordID) {
        var table = $('#customers').DataTable(); // Select DataTable by ID.
        table.row(targetTr).remove().draw(); // Remove record from DataTable.
      }
    }
  });
  $(this).confirmation('show');
}
＆＃13; 
<!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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.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>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

在代码中添加了一行，以显示它在第一次点击时显示确认。

＆＃13;
＆＃13; 
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', '#customers :button.customer_delete', deleteCustomer);

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

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: function() {
      if (recordID) {
        var table = $('#customers').DataTable(); // Select DataTable by ID.
        table.row(targetTr).remove().draw(); // Remove record from DataTable.
      }
    }
  });
  
  //added this line to show the confirmation immediately after initialization
  $(this).confirmation('show');
}
＆＃13; 
<!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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.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>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题