附加Jquery.min.js时发生jQuery冲突

Question

I presume the is cause to my problem is a Jquery conflict. Please correct me in the first place if it isn't the case looking at below.

I'm new to Jquery and trying to insert a drop down plug in to a site. The attempt is successful, however an already existing Jquery image slider goes away when the drop down works.

My code looks like below.

Links which relevant to the image slider plug in:

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

and the links for the dropdown plugin;

<script src="pro_v/jqueryminx.js"></script>
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">    </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

When I remove the jqueryminx.js link the image slider works fine. So I tried doing the following as suggested by one of the stakoverflow questions but couldn't get to work.

My attempt as follows. tried to use noConflict;

<script src="css/SliderOne/jquery.min.js"></script>
$.noConflict(true);
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

and also here.

<script src="pro_v/jqueryminx.js"></script>
$.noConflict(true);
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">        </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

Doesn't seems to be working. Any help would be much appreciated. Thank you.

Answer 1

To properly apply noConflict you should put noConflict into the script tags. it will clear $ variable from global scope. You will then reference jquery via jQuery.

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$.noConflict(true);
jQuery(window).load(function() {
jQuery('.blueberry').blueberry();
});
</script>

OR you can use this in this contruct using $ variable internal to ready callback function

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here. In your case
 $('.blueberry').blueberry();
});