【问题标题】:.on('show.bs.modal', function() not working in safari and firefox.on('show.bs.modal', function() 在 safari 和 firefox 中不起作用
【发布时间】: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">&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>

【问题讨论】:

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


    【解决方案1】:

    您需要使用代码将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>'))
    });
    

    工作 sn-p:-

    $(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 中仍然遇到问题,请查看此帖子:-Bootstrap modal issue on Safari/iOS/iPhone

    【讨论】:

    • 感谢您的回答。现在 Firefox 浏览器可以工作,但 safari 仍然无法工作(我在 ipad ios 10.2 上进行测试)。你对我有什么建议吗?
    • 我找到了。非常感谢你帮助我:) bootstrap-modal-issue-on-safari-ios-iphone
    • @zinlucifer 很高兴听到你也尝试了一些东西。很高兴帮助你:):)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-01-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-16
    相关资源
    最近更新 更多