Uncaught TypeError... no method 'on'

StackOverflow https://stackoverflow.com/questions/19594622

  •  01-07-2022
  •  | 
  •  

質問

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>
役に立ちましたか？

解決

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()

他のヒント

You have got this error because of jQuery. You have include jQuery version 1.6 and .on() method is included in jQuery 1.7 so please include jQuery 1.7.2 (standard version) to resolve your problem..

Jquery on()

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top