I use a number of jQuery plugins on my site (owl carousel for example) which work fine everywhere except one page where I require another script which loads content from another site into an iframe.
On the problem page I am getting errors for all my jQuery plugins, i.e. owl carousel:
$(...).owlCarousel is not a function
I have tried running jQuery in no conflict mode:
jQuery.noConflict();
(function($){
$(function(){
$('.carousel').owlCarousel({
items: 3,
lazyLoad: true
});
});
})(jQuery);
But I still get the same error.
I have double checked my filepaths are correct and the files are being loaded in the correct order. They are:
<script type="text/javascript" src="mysite.com/jquery/jquery.min.js"></script>
<script type="text/javascript" src="mysite.com/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="mysite.com/custom.js"></script><!-- call to owl carousel-->
In the body I have a placeholder div for the iframe to be loaded into. Then I include the script for loading the iframe:
<script type="text/javascript" src="mysite.com/iframe-script.js">
And after this some simple javascript config settings for the iframe and that's it.
The iframe script is a few thousand lines unminified and a bit beyond my understanding of javascript but, from what I can tell it uses its own custom variable for referencing jQuery which is why I don't think the issue is a jQuery conflict issue.
jQuery still works in mysite.com/custom.js
, i.e. all onclick events fire with no errors. So jQuery is working. Just none of the jQuery plugins I am using.
What is going wrong here?