Question

我已将表格的所有行设置为打开引导模式但是，在每一行内部，我都有一个选择框，其中包含一些用户必须能够选择的状态如何在单击选择框时阻止打开模式？

这是我的代码：

HTML

<div class="row">
    <div class="col-md-6">
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            <tr class="user-row" data-toggle="modal" data-target="#myModal">
                <td>John Doe</td>
                <td>
                    <select class="form-control status-selection">
                        <option></option>
                        <option>Active</option>
                        <option>Inactive</option>
                    </select>
                </td>
            </tr>
            <tr class="user-row" data-toggle="modal" data-target="#myModal">
                <td>Jane Doe</td>
                <td>
                    <select class="form-control status-selection">
                        <option></option>
                        <option>Active</option>
                        <option>Inactive</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Jsfiddle链接： https://jsfiddle.net/2c21mzfm/

提前致谢。

Answer 1

请参阅this小提琴：

$(".user-row select").on("click", function (e) {
    e.stopPropagation();
});

这个想法是你停止点击事件（e - on 回调的第一个参数，它是事件的委托参数）冒泡最高.user-row stopPropagation

Answer 2

您正在设置整个表格行以激活模态。只需设置 td 即可激活模式。

<强> HTML

<tr class="user-row">
  <td data-toggle="modal" data-target="#myModal">John Doe</td>
  <td>
    <select class="form-control status-selection">
      <option></option>
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </td>
</tr>

单击触发元素内部时如何防止Bootstrap Modal打开？

2 个答案: