Davide
Davide

Reputation: 173

JQuery On method doesn't work

I got this error in Firefox: TypeError: $("#main-CNTR").on is not a function. And this code doesn't work at all:

$(document).ready(function(){
    $('#main-CNTR').on('mouseenter','.social_span',function(){
        alert("INSIDE");
    });
    $('#main-CNTR').on('mouseleave','.social_span',function(){
        alert("OUTSIDE");
    });
});

The HTML part is this

    <span class="social_span"></span>
    <div class="row clearfix" style="display:none;">
        <ul class="social-buttons cf">
            <li>1</li>                                    
        </ul>
    </div>

On mouse entering the span a message should be displayed and the next div shown. Obviously the div#main-CNTR is the main content container div and the HTML snippet is repeated several time in the page.

The live method correctly works but not in ie8.

$('.social_span').live('mouseenter',function(){
    alert("INSIDE");
});
$('.social_span + .row').live('mouseleave',function(){
    alert("OUTSIDE");
});

Can anyone help me? Thanks!

    <script type="text/javascript" src="/js/libs/modernizr-2.5.3.min.js"></script>
    <script type="text/javascript" src="/js/jQuery/engine/core8.js"></script>
    <script type="text/javascript" src="/js/jQuery/engine/ui.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.tools.min.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.easing.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.lavalamp.min.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.li-scroller.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.reflection.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="/js/jQuery/plugin/jquery.selectbox.js"></script>

Upvotes: 1

Views: 2437

Answers (3)

Davide
Davide

Reputation: 173

I found that the jQuery TOOLS library was loading itself the 1.6.4 jQuery's version. And now 'on' method works. Hope it will be fine in ie8 too...

Upvotes: 0

wroniasty
wroniasty

Reputation: 8052

Seems to work just fine with jQuery 1.8.0:

http://jsfiddle.net/wroniasty/2q2Df/

Upvotes: 2

Anthony Grist
Anthony Grist

Reputation: 38345

The .on() function was added in jQuery 1.7, so you'll need to make sure you're using that version or higher in order to use .on(). From the error you're getting that doesn't appear to be the case.

Upvotes: 5

Related Questions