Question

我触发了shown.bs.modal事件并且什么也没做。我之前有过这个工作，但现在却默默地失败了。我完全孤立了这个问题。为了理智，我删除了所有内容并将其归结为几个静态文件，但它仍然没有触发。 bootstrap.min.js正在运行，jQuery已加载，并且包含该事件的自定义js doc正在触发（当然除了shown.bs.modal之外的所有内容）。

以下是代码：

<script type="text/javascript">
    jQuery(document).ready(function($) {

        function modal() {
            $('#myModal').on('shown.bs.modal', function (e) {
                alert( e.relatedTarget.nodeName );
            }); 
        }
        modal();
    });
</script>

<div class="row">
    <div class="col-md-12 noPadding">
        <div id="container">
            <div class="width_calculator">
                <a href="javascript:;" data-target="#myModal"><img src="images/catapult.jpg"></a>
            </div>
            <div class="item">
                <img src="images/catapult.jpg">
            </div>
            <div class="item">
                <img src="images/catapult.jpg">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</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>

Answer 1

这个答案是对杰森在这里发表的评论的回应：Bootstrap 3.1.1 event not firing

你是对的。你可以在没有JS的情况下发射模态。在这种情况下，您无需使用data-target或data-toggle属性。您面临的问题与如何解雇此事件有关。

如果你看一下你提供的代码，就会使用jQuery的.on()函数。 jQuery提供的这个方法的描述是“将一个或多个事件的事件处理函数附加到所选元素。”所以你成功完成的是附加一个将在{时调用的处理程序{1}}事件被触发。这不完全是你想要的，因为你真的想要触发事件;你刚刚定义了事件触发后会发生什么。

看一下Bootstrap's documentation for the usage of modals，您会注意到您可以在不使用数据属性的情况下调用模态，而是使用JavaScript。要创建模态，只需在所选模态上使用shown.bs.modal方法。

以下是您在上下文中使用所有这些内容的示例（JSFiddle）：

.modal()

Bootstrap 3.1.1事件未触发

1 个答案: