因子捆绑包裹时,Bootstrap不起作用？

Question

我一直在使用factor-bundle来包装我的常见JS文件:

browserify index.js bar-charts.js list-filter.js dashboard.js 
 -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] 
 -o ../../static/js/common.js

然后我在我的HTML中包含了common.js以及一个Bootstrap警报:

 <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
 <script src="/static/js/common.js"></script>

但警报关闭按钮不起作用,因此Bootstrap显然没有被提取.

如果我在CDN中包含Bootstrap和jQuery,在同一个HTML页面中,它可以正常工作:

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这是一个JSFiddle与我的common.js文件,不工作:http://jsfiddle.net/2v9easbz/

这是一个JSFiddle与直接CDN链接,工作正常:http://jsfiddle.net/vkf027z2/

我的common.js文件有什么问题？

Answer 1

您为解决问题而向我们提供的参考资料并不准确。因此，我们讨论了所有可能的答案，可以帮助您并指导您使用它。

我们可以使用或向所有警报消息添加关闭功能。bootstrap-alert.jsbootstrap.js

用法

通过 JavaScript 启用消除警报：

$(".alert").alert()

标记

只需添加data-dismiss="alert"到您的关闭按钮即可自动提供警报关闭功能。

<a class="close" data-dismiss="alert" href="#">&times;</a>

方法

$().alert()

使用关闭功能包装所有警报。要让警报在关闭时以动画方式显示，请确保它们已应用 .fade 和 .in 类。

.alert('close')

关闭警报。

$(".alert").alert('close')

在您的代码中，您使用标记方式将警报解雇为

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

仅当使用其依赖插件bootstrap-alert.js或 时，这才会起作用并消除警报。bootstrap.js

我没有发现您试图将common.js这个依赖插件捆绑到您的位置。

如果您要包装这些依赖项，请确保您提供的文件或插件的路径引用位于解决方案的确切部分。