【发布时间】:2018-03-30 04:59:22
【问题描述】:
我在使用 Jquery 和 Bootstrap v3.3.7 时遇到问题。 当我尝试在 firefox 和 safari 浏览器上使用 .on ('show.bs.modal', function () 时它不起作用(在 chrome 浏览器中工作)。
我无法获得值“date-id”。
我该怎么办。
https://fiddle.jshell.net/05s5vzc7/11/
$(function(){
$('#bookModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show.bs.modal', function(){
var getIdFromRow = $(event.target).data('id');
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered">
<tr>
<td colspan="32" style="text-align: center;"> 2018 March</td>
</tr>
<tr>
<td> Date </td>
<td> Barber </td>
<td> 08.00-08.30 </td>
<td> 08.30-09.00 </td>
</tr>
<tr>
<td> 1st Sat. </td>
<td> Jack </td>
<td data-toggle="modal" data-id="2018-03-20_08:00_08:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_08:30_09:00_barber_id" data-target="#bookModal"></td>
</tr>
</table>
<div id="bookModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div id="orderDetails" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
【问题讨论】:
标签: javascript jquery twitter-bootstrap-3 bootstrap-modal