Question

我一直在使用带有链接的模态，它按预期工作：

<a data-toggle="modal" data-target="#edit-multiple-70304842829540" data-remote="true" data-type="html" data-method="post" title="Edit Multiple" href="/contacts/edit_multiple">
  <span class="fa fa-pencil-square-o" aria-hidden="true"></span>
</a>
<div class="modal fade" id="edit-multiple-70304842829540" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sizer">
    <div class="modal-content">
      <div class="modal-header" style="overflow: auto;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title" id="myModalLabel">Edit Multiple</h2>
      </div>
      <div class="loading" style="display: none;">
        <img src="/assets/spinner.gif" alt="Spinner">
      </div>
      <div class="modal-target">
        ...
      </div>
    </div>
  </div>
</div>

点击链接和模态显示。但是，我尝试使用选择表单的选项元素，并且不显示模态：

<select name="global_filter_id" id="global_filter_id" data-remote="true" data-url="/contacts" data-params="card_position=card&amp;contactable=Lead" data-type="html" class="form-control">
  <option data-toggle="modal" data-target="filterEdit" data-url="/contacts/edit_multiple" data-remote="true" data-type="html" data-method="post" data-params="filterable_type=Lead" value="1">Edit/Delete Filter</option>
</select>
<div class="modal fade" id="filterEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sizer">
    <div class="modal-content">
      <div class="modal-header" style="overflow: auto;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title" id="myModalLabel">Edit/Delete Filter</h2>
      </div>
      <div class="loading" style="display: none;">
        <img src="/assets/spinner.gif" alt="Spinner">
      </div>
      <div class="modal-target">
      </div>
    </div>
  </div>
</div>

请注意，option元素具有data-toggle ='modal'属性，option元素的data-target与模态div的id匹配。那么为什么我选择选项元素时不会显示模态？

Answer 1

Bootstrap正在监听click和tap事件以触发模态的打开。

但<option>是两个事件的无效目标。正如你可以在下面测试的那样，它们永远不会发生：

$(window).on('click tap','option', function(e){
  console.log('This will never happen!');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

所有pointer和touch事件都在<option>关闭。唯一触发的是change，但是在父<select>上。

有关详细信息，请参阅MDN上Browser compatibility下的[2]点。

解决方法是从所选选项中获取模态数据并自行打开模态。仔细观察，我注意到你的bootstrap切换上的data参数看起来像是XhrHttpRequest的参数。您将使用数据中的参数自己进行调用，并在成功时解析模态中的值。现在我只是console.log() - 编辑：

$('#global_filter_id').on('change', function(e){
  let data = $(e.target).find('option:selected').data();

  if (data && (data.toggle=="modal") && $('#'+data.target).is('.modal')) {

    console.log(data); 
    // make your ajax call here and open the modal
    // while waiting for results...

    $('#'+data.target).modal();
  } 
})

$('#global_filter_id').on('change', function(e){
  let data = $(e.target).find('option:selected').data();
  
  if (data && (data.toggle=="modal") && $('#'+data.target).is('.modal')) {

    console.log(data); 
    // make your ajax call here and open the modal
    // while waiting for results...

    $('#'+data.target).modal();
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>


<select name="global_filter_id" id="global_filter_id" data-remote="true" data-url="/contacts" data-params="card_position=card&amp;contactable=Lead" data-type="html" class="form-control">
  <option></option>
  <option data-toggle="modal" data-target="filterEdit" data-url="/contacts/edit_multiple" data-remote="true" data-type="html" data-method="post" data-params="filterable_type=Lead" value="1">Edit/Delete Filter</option>
</select>
<div class="modal fade" id="filterEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sizer">
    <div class="modal-content">
      <div class="modal-header" style="overflow: auto;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title" id="myModalLabel">Edit/Delete Filter</h2>
      </div>
      <div class="loading" style="display: none;">
        <img src="/assets/spinner.gif" alt="Spinner">
      </div>
      <div class="modal-target">
      </div>
    </div>
  </div>
</div>

为什么没有自举检测选定选项上的切换模式？

1 个答案: