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

Question

我在使用 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">&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>

Answer 1

您需要绑定(bind)event使用代码到实际模态:-

.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>

工作 fiddle 链接:- https://fiddle.jshell.net/smu3k6rb/

如果在 Safari 中仍然遇到问题，请检查此帖子:- Bootstrap modal issue on Safari/iOS/iPhone