CODEWITHSUNDEEP
javascriptjquerycssajax
Tristan Cunningham
Tristan Cunningham

Reputation: 919

Jquery hover with .on()

Im trying to use hover with .on(), but all bits of code and answers i find do not work.

I need to use .on because its Ajax content.

A few ive tried:

$(document).on('mouseenter', '[rel=popup]', function() {
    mouseMove = true;
    width = 415;
    $('#tool-tip').show();

    var type = $(this).attr('data-type'),
        id = $(this).attr('data-skillid');

    console.log("TT-open");
    ttAjax(type, id);
}).on('mouseleave', '[rel=popup]', function() {
    mouseMove = false;
    console.log("TT-close");
    $('#tool-tip').hide();
    $('#tt-cont').html("");
    $('#tt-ajax').show();
});

$('[rel=popup]').on('hover',function(e) { 
    if(e.type == "mouseenter") {
        mouseMove = true;
        width = 415;
        $('#tool-tip').show();

        var type = $(this).attr('data-type'),
            id = $(this).attr('data-skillid');

        console.log("TT-open");
        ttAjax(type, id);
    }
    else if (e.type == "mouseleave") {
        mouseMove = false;
        console.log("TT-close");
        $('#tool-tip').hide();
        $('#tt-cont').html("");
        $('#tt-ajax').show();
    }
});

$('[rel=popup]').on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

$(document).on({
    mouseenter: function () {
        console.log("on");
    },
    mouseleave: function () {
        console.log("off");
    }
}, "[rel=popup]"); //pass the element as an argument to .on

The original non .on:

$('[rel=popup]').hover(function(){
    mouseMove = true;
    width = 415;
    $('#tool-tip').show();

    var type = $(this).attr('data-type'),
        id = $(this).attr('data-skillid');

    console.log("TT-open");
    ttAjax(type, id);

},function () {
    mouseMove = false;
    console.log("TT-close");
    $('#tool-tip').hide();
    $('#tt-cont').html("");
    $('#tt-ajax').show();
})

All the .on return "TypeError: $(...).on is not a function". I am using version 1.9.1.

Upvotes: 0

Views: 122

Answers (2)

Tristan Cunningham
Tristan Cunningham

Reputation: 919

There was an answer with:

$(document).on({
    mouseenter: function () {
        console.log("on");
    },
    mouseleave: function () {
        console.log("off");
    }
},"[rel=popup]");

This worked, and for some reason I have JQ 1.4 in a 1.9.1 named file that was causing the problem.

Upvotes: 0

HC_
HC_

Reputation: 1050

The events you're looking for may be

$("#id").mouseover(function(){});

or

$("#id").mouseout(function(){});

Upvotes: 2

Related Questions