10

我一直在使用 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>

这是我的 common.js 文件的 JSFiddle，不工作：http: //jsfiddle.net/2v9easbz/

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

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

4

1 回答 1

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用这个依赖插件捆绑到你的地方。

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

于 2015-08-25T08:13:34.820 回答