jfar_magnetik jfar_magnetik - 5 months ago 11
Javascript Question

Uncaught TypeError... no method 'on'

Chrome dev console is giving me this and because of this (I think it is because of this) the left right and bullets aren't appearing on my slicebox slider. I'm only referencing jQuery once which seemed to be the problem with another question on here so not sure what the issue is.

My entire head code is here:

<head>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="robots" content="index,follow" />
<meta name="Keywords" content="Website designers Lancaster, Web developers Lancashire, Mobile Web Designers lancashire, Website Designers Morecambe, make my site mobile friendly, mobile websites, " />
<meta name="author" content="magnetikmedia web and mobile web design" />
<link rel="stylesheet" type="text/css" href="/magnetik.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32427484-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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="/imageswapaudio.js">

/***********************************************
* Image Swap and HTML5 audio effect (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">
if (screen.width<800) {
window.location="http://www.magnetikmedia.co.uk/m/index.html";
}
</script>

<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(function() {

var Page = (function() {

var $navArrows = $( '#nav-arrows' ).hide(),
$navOptions = $( '#nav-options' ).hide(),
$shadow = $( '#shadow' ).hide(),
slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {

$navArrows.show();
$navOptions.show();
$shadow.show();

},
orientation : 'h',
cuboidsCount : 3
} ),

init = function() {

initEvents();

},
initEvents = function() {

// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {

slicebox.next();
return false;

} );

$navArrows.children( ':last' ).on( 'click', function() {

slicebox.previous();
return false;

} );

$( '#navPlay' ).on( 'click', function() {

slicebox.play();
return false;

} );

$( '#navPause' ).on( 'click', function() {

slicebox.pause();
return false;

} );

};

return { init : init };

})();

Page.init();

});
</script>

</head>

Answer

2 Things:

on() was added only in version 1.7, so you would have to update the version of jquery you are using.

Once you upgrade the library, just move the reference to jquery above the google tracking code.

<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-32427484-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>

Now, if for some reason you cannot upgrade to 1.7 or greater, you could use live() instead of on()

Comments