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">×</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">×</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="#">×</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">×</span></button>
只有使用其依赖插件bootstrap-alert.js或bootstrap.js时,这才能正常工作和关闭警报.
我发现没有你试图用这个依赖插件来捆绑到你的common.js.