jQuery冲突,可能存在引导程序问题
jQuery conflict, possible bootstrap issue?
我试图运行的某些jQuery出现问题。我正试图在我的引导应用程序中实现这一点:
http://jsfiddle.net/YG6k6/
然而,当我试图在引导应用程序中实现这一点时,我会遇到一系列错误,例如:
Uncaught TypeError: Cannot call method 'fadeIn' of null index.php:108
Uncaught TypeError: Cannot call method 'animate' of null index.php:109
我尝试了几种方法来解决这个问题,但都没有成功。如果有任何帮助的话,我正在使用jquery/1.10.1/。
编辑:
这是我页脚中的代码:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$('#iphone-img').mouseover(function(){
$('.main-content-box').fadeIn(600).show(); //on mouse enter show div
});
$('#iphone-img').mouseleave(function(){
$('.main-content-box').animate({opacity: 'toggle'}, 'slow');
});
});
</script>
<script src="js/bootstrap.js"></script>
<script type='text/javascript' src='js/lib/prototype.js'></script>
<script type='text/javascript' src='js/lib/raphael.js'></script>
<script type='text/javascript' src='js/lib/highlight.js'></script>
<script type='text/javascript' src='js/analytics.js'></script>
<script type="text/javascript">
$(function () {
$('#info-tabs').tab('show');
});
$(function(){
$('#pop-info').tooltip('hide');
});
$(function(){
$('#videoModal').modal('hide');
});
</script>
<script type='text/javascript'>
function onLoad(){
Element.observe(window,'load', function(){
var w = 840;
var h1 = Raphael('beautiful-line-chart1', w, 250);
var h2 = Raphael('beautiful-line-chart2', w, 250);
//var h3 = Raphael('beautiful-line-chart3', w, 250);
//var h4 = Raphael('beautiful-line-chart4', w, 250);
/* Line Chart 2; table_id:e3 tbody-class: line_e3 table_id:e33 */
drawLine({
holder: h1,
data_holder: 'd2',
mastercolor: '#01A8F0',
spewidth: w,
showarea: true,
mousecoords: 'circle',
nodot: true
});
drawLine({
holder: h1,
data_holder: 'd1',
mastercolor: '#666',
spewidth: w,
showarea: true,
mousecoords: 'circle',
});
drawLine({
holder: h2,
data_holder: 'e3',
mastercolor: '#555',
spewidth: w,
showarea: false,
mousecoords: 'circle',
gridcolor: '#333333',
nodot: true
});
drawLine({
holder: h2,
data_holder: 'e3',
mastercolor: '#8dd916',
spewidth: w,
showarea: true,
mousecoords: 'circle',
gridcolor: '#333333',
dotcolor: '#333333'
});
drawLine({
holder: h3,
data_holder: 'd2',
mastercolor: '#d90000',
spewidth: w,
showarea: false,
mousecoords: 'rect'
});
drawLine({
holder: h4,
data_holder: 'd2',
mastercolor: '#ccc',
spewidth: w,
showarea: false,
nodot: true // hide dots
});
drawLine({
holder: h4,
data_holder: 'd1',
mastercolor: '#eb2682',
spewidth: w,
showarea: true,
nodot: true // hide dots
});
});
// Just used in the code highlighter
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
}
onLoad();
</script>
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 2000
});
</script>
</body>
当我把代码包装在一个函数中时,我也应该添加,比如:
$(function(){});
它仍然不起作用。
这是原型库覆盖jQuery
的$
引用的问题,即在代码中$
引用的是protorype库而不是jQuery。
您需要使用jQuery.noConflict()来解决此问题,或者使用jQuery来引用jQuery库而不是$
jQuery(function($){
$('#info-tabs').tab('show');
$('#pop-info').tooltip('hide');
$('#videoModal').modal('hide');
})
相关文章:
- Html引导程序警报自动关闭困难
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- Twitter引导程序Typeahead-Id&标签
- 引导程序崩溃一次只能看到一个
- 引导程序/基础堆叠行/列
- 如何保持引导程序下拉复选框列表下拉
- .aspx页面上引导程序中的动态选项卡
- 菜单栏class=活动引导程序主题无法正常工作
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 如何在引导程序元素的顶部添加掩码
- 如何平滑地设置twitter引导程序进度条的动画
- 如何在模式弹出窗口中使用引导程序日期和时间选择器
- 引导程序转盘不工作:堆叠图像(使用rails)
- datepicker引导程序再次初始化
- Nano Scroller在引导程序DropDown和Model Box中不起作用
- 如何在1920px大屏幕的引导程序中将容器大小更改为960px
- Twitter引导程序在下拉列表打开时停止传播
- 文本链接可更改引导程序选项卡
- 如何使用引导程序在一行中存在 3 个缩略图后创建新行
- jQuery冲突,可能存在引导程序问题