.on('show.bs.modal'， function() 在 safari 和 Firefox 中不起作用

我在使用Jquery和Bootstrap v3.3.7时遇到了问题。当我尝试在火狐浏览器和野生动物园浏览器上使用.on('show.bs.modal'，函数())时，它不起作用(在chrome浏览器中工作)。

我无法获取值"日期 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">&times;</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>

您需要使用代码将事件绑定到实际模态：-

.on('show.bs.modal', function(event){// pass event as a parameter
var targetTd = $(event.relatedTarget); // get td which triggered the modal
var getIdFromRow = $(targetTd).data('id');// get the attribute
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))
});

工作片段：-

$(function(){
$('#bookModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show.bs.modal', function(event){
var targetTd = $(event.relatedTarget);
var getIdFromRow = $(targetTd).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>
<td> 09.00-09.30 </td>
<td> 09.30-10.00 </td>
<td> 10.00-10.30 </td>
<td> 10.30-11.00 </td>
<td> 11.00-11.30 </td>
<td> 11.30-12.00 </td>
<td> 12.00-12.30 </td>
<td> 12.30-13.00 </td>
<td> 13.00-13.30 </td>
<td> 13.30-14.00 </td>
<td> 14.00-14.30 </td>
<td> 14.30-15.00 </td>
<td> 15.00-15.30 </td>
<td> 15.30-16.00 </td>
<td> 16.00-16.30 </td>
<td> 16.30-17.00 </td>
<td> 17.00-17.30 </td>
<td> 17.30-18.00 </td>
<td> 18.00-18.30 </td>
<td> 18.30-19.00 </td>
<td> 19.00-19.30 </td>
<td> 19.30-20.00 </td>
<td> 20.00-20.30 </td>
<td> 20.30-21.00 </td>
<td> 21.00-21.30 </td>
<td> 21.30-22.00 </td>
<td> 22.00-22.30 </td>
<td> 22.30-23.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>
<td data-toggle="modal" data-id="2018-03-20_09:00_09:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_09:30_10:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_10:00_10:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_10:30_11:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_11:00_11:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_11:30_12:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_12:00_12:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_12:30_13:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_13:00_13:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_13:30_14:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_14:00_14:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_14:30_15:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_15:00_15:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_15:30_16:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_16:00_16:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_16:30_17:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_17:00_17:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_17:30_18:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_18:00_18:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_18:30_19:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_19:00_19:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_19:30_20:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_20:00_20:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_20:30_21:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_21:00_21:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_21:30_22:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_22:00_22:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_22:30_23: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">&times;</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>

工作小提琴链接：-https://fiddle.jshell.net/smu3k6rb/

如果在 safari 中仍然遇到问题，请检查此线程：-Safari/iOS/iPhone 上的引导模式问题

相关内容

最新更新

热门标签：