Javascript 引导程序3.1.1事件未触发

我正在触发

show.bs.modal

事件，但它什么也不做。我以前有过这样的工作，但现在它悄无声息地失败了。我已经完全隔离了这个问题。为了理智起见，我删除了所有内容，并将其还原为几个静态文件，但仍然没有启动

bootstrap.min.js

正在工作，jQuery已加载，包含事件的自定义js文档正在启动（当然除了

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

jQuery（文档）.ready（函数（$）{
函数模态（）{
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
警报（e.relatedTarget.nodeName）；
}); 
}
模态（）；
});
&时代
情态标题
...
关
保存更改

这个答案是对Jason在这里的评论的回应：

你说得对。您可以在没有JS的情况下启动modal。在这种情况下，不需要使用

数据目标

或

数据切换

属性。你面临的问题与你如何发动这场比赛有关

如果您查看一下您提供的代码，您使用的是jQuery函数。jQuery提供的此方法的描述是“将一个或多个事件的事件处理程序函数附加到所选元素。”因此，您成功完成的是附加一个处理程序，该处理程序将在触发

show.bs.modal

事件时调用。这并不完全是你想要的，因为你实际上想要触发事件；您刚刚定义了触发事件后应该发生什么

看一看，您会注意到，您可以在不使用数据属性的情况下，通过使用JavaScript来调用模态。要创建模态，只需对所选模态使用

.modal（）

方法

下面是如何在上下文（）中使用所有这些的示例：

$（文档）.ready（函数（）{
$（'#myImage'）。单击（函数（）{
$（'#myModal'）.modal（）；
});
});
&时代
情态标题
...
关
保存更改

您看过引导文档了吗？您需要一个

data toggle=“modal”

，引导程序才能知道如何打开模态。

数据目标=“#myModal”

显然也需要知道哪个模式。下面是一个例子，我唯一更改的是添加了

数据切换

属性：（忽略损坏的图像，只需单击第一个图像）我确实仔细阅读了它。我假设JS版本不需要“数据切换”，并且我不恰当地假设“数据切换”强制使用“非javascript”版本的模式。有时候，这是摆在你面前最明显的解决办法（我不知道你所说的“JS版本”是什么意思，但在文档中，它说：“在不编写JavaScript的情况下激活模式。在控制器元素上设置

data toggle=“modal”

，如按钮，以及

data target=“\foo”

或

href=“\foo”

以特定模式为切换目标。”。无论如何，很高兴它现在可以工作了。你不需要任何额外的js。确保你包括bootstrap.min.js thoughtIan，这是让我困惑的部分。你可以根据bootstrap文档启动模式“无js”。包括“数据目标”和“数据切换”在elm上，将调用开箱即用的引导模式，而不必触发.on（）事件。我出错的地方是，我认为如果我是通过单击事件触发模式，则不需要“数据切换”。很明显，引导使用“数据目标”作为钩子来代替对id的需要，但“切换”并不明显。

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

        $('#myImage').click(function() {
            $('#myModal').modal();
        });

    });
</script>

<div class="row">
    <div class="col-md-12 noPadding">
        <div id="container">
            <div class="width_calculator">
                <img id="myImage" src="images/catapult.jpg">
            </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>