问题
Could anyone explain the jQuery no conflict mode to me once and for all. From what I have read, it will resolve issues where jquery scripts are conflicting, but I'm not sure how to implement it and what conflicts it's resolving?
I am using a lot of scripts here which have accumlated over time. Now however, it is a bit of a mess and I wondering if anyone could advise me as to how to get rid of any conflict issues between the scripts.
Currently, the 'datepicker' script won't work. However, if I move the 'datepicker' further up the page, it does work, but then something else doesn't and I have tried every combination and cannot get all the scripts working all at one time.
Here are all my scripts (I removed any html or css as want to make this as clear as possible). Maybe some can be grouped together to make it all a bit tidier? Would jQuery conflict mode solve these conflict issues?
My code is below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/scripts/libs/modernizr-2.5.3.min.js"></script>
<script src="/imageswapaudio.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 155, 'padding-top' : 100}, 0);
$('.menuitem').mouseover(function(){
gridimage = $(this).find('img');
gridimage.stop().animate({width: 200, 'padding-top': 0}, 500);
}).mouseout(function(){
gridimage.stop().animate({width: 155, 'padding-top': 100}, 300);
});
});
</script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"auto"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non- retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32843811-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
$(document).ready(function(){
// at first hide divs
$(".slidingDiv").hide();
$(".slidingDiv2").hide();
$(".slidingDiv3").hide();
$(".slidingDiv4").hide();
$(".slidingDiv5").hide();
$(".slidingDiv6").hide();
$(".slidingDiv7").hide();
$(".slidingDiv8").hide();
$(".slidingDiv9").hide();
$(".slidingDiv10").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});
$('.first_s').live('click', function(){
$(".slidingDiv2").slideToggle();
return false;
})
$('.second_s').live('click', function(){
$(".slidingDiv3").slideToggle();
return false;
})
$('.third_s').live('click', function(){
$(".slidingDiv4").slideToggle();
return false;
})
$('.fourth_s').live('click', function(){
$(".slidingDiv5").slideToggle();
return false;
})
$('.fifth_s').live('click', function(){
$(".slidingDiv6").slideToggle();
return false;
})
$('.sixth_s').live('click', function(){
$(".slidingDiv7").slideToggle();
return false;
})
$('.seventh_s').live('click', function(){
$(".slidingDiv8").slideToggle();
return false;
})
$('.eighth_s').live('click', function(){
$(".slidingDiv9").slideToggle();
return false;
})
$('.ninth_s').live('click', function(){
$(".slidingDiv10").slideToggle();
return false;
})
});
</script>
<script src="http://www.paycoservices.co.uk/js/dpicker.js"></script>
<script src="http://www.paycoservices.co.uk/js/dpicker-ui.js"></script>
<script>
$(function() {
$( "#datepicker, #datepicker2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script src="jsImgSlider/themes/3/js-image-slider.js" type="text/javascript"></script>
Below are the errors I'm getting running the Chrome browser console:
GET http://www.paycoservices.co.uk/ahkerrigan-light-webfont.woff 404 (Not Found) Simply- Umbrella-Registration.asp:215
Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://www.paycoservices.co.uk/ahkerrigan-light-webfont.ttf". Simply-Umbrella- Registration.asp:839
GET http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.woff 404 (Not Found) Simply- Umbrella-Registration.asp:450
Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.ttf". Simply-Umbrella- Registration.asp:839
GET http://www.paycoservices.co.uk/onlineforms/webform/scripts/wufoo.js 404 (Not Found) Simply-Umbrella-Registration.asp:839
1. Uncaught TypeError: Object [object Object] has no method 'datepicker' Simply-Umbrella- Registration.asp:163
[cycle] terminating; zero elements found by selector
回答1:
jQuery no conflict mode is for situations where you have several javascript libraries included in your page and each of them defines a global variable named $. In this case, jQuery.noConflict() changes the value of $ value back to the old value provided by a different library and you have to use jQuery functions by using the variable jQuery in your code instead of $.
Having said this, if you have included nother library that provides a $ variable, then the no conflict mode could help and you would have to rewrite all usages of $ to jQuery.
回答2:
I decided to go for a very simple date picker that doesn't reply on anything so went for this one, which works fine with my other scripts. http://www.splinter.com.au/javascript-date-picker-that-doesnt-sucktm/
来源：https://stackoverflow.com/questions/17943109/how-does-jquery-no-conflict-mode-work