Question

我遇到了Jquery和Bootstrap v3.3.7的问题。当我尝试在firefox和safari浏览器上使用.on（＆＃39; show.bs.modal＆＃39;，function（）时，它不起作用（在chrome浏览器中工作）。

我无法获得价值＆＃34; date-id＆＃34;。

我该怎么做。

https://fiddle.jshell.net/05s5vzc7/11/

＆＃13;

$(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>'))
    });
});

＆＃13;

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

＆＃13;

Answer 1

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

string pattern = @".*" + variableName + ".*";
var result = Regex.Replace(stateParamFile, pattern, "set " + variableName + "=" + variableValue);

工作代码段： -

＆＃13;

.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>'))
});

＆＃13;

$(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>'))
  });
});

＆＃13;

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

如果在safari中仍然遇到问题，请查看以下主题： - Bootstrap modal issue on Safari/iOS/iPhone

.on（＆＃39; show.bs.modal＆＃39;，function（）在safari和firefox中不起作用

1 个答案: