javascript - Bootstrap 在被 factor-bundle 包裹时不起作用?

标签 javascript twitter-bootstrap browserify factor-bundle

我一直在使用 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 没有被拾取。

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

<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 文件有什么问题?

最佳答案

您提供给我们的不是解决问题的确切引用。因此讨论了这个答案的所有可能性可以帮助您并指导您使用它。

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

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')

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

<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 的地方使用此依赖插件。

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

关于javascript - Bootstrap 在被 factor-bundle 包裹时不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32019332/

相关文章:

css - 将父 div 大小用于 Bootstrap 响应式网格系统

html - 使用 col-lg-8 bootstrap 时 margin 自动不起作用

javascript - babel,browserify 错误 : using removed babel 5 option base. 阶段

javascript - Browserify 中的 require.context() 等效项

javascript - 查看服务 worker 内部的请求是否成功

javascript - 使用 javascript 和 css 消失 php 抓取/输出数据的文本

javascript - 使用javascript css隐藏显示div

html - 如何在 Bootstrap 的帮助下将标题的一部分右对齐

java - 通过WinJS通过Java Servlet将图像存储到mysql数据库中

javascript - 每次以不同的入口点运行 Webpack,但仍然使用配置文件?