JavaScript – Bootstrap在包含因子绑定时不起作用？

我一直在使用因子包来包装我的常见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/

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

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

解决方法

不是您提供给我们的精确参考,以解决问题.所有这些答案都可以帮助您并指导您使用.

我们可以使用bootstrap-alert.js或bootstrap.js为所有alert messages添加关闭功能.

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close
button to automatically give an alert close functionality.

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

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate
out when closed,make sure they have the .fade and .in class already
applied to them.

.alert('close')

Closes an alert.

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

在您的代码中,您使用的是Markup的提醒方式

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

如果您正在包装这些依赖关系,请确保您提供的文件或插件的路径引用是您的解决方案的确切部分.