简体   繁体   中英

Why won't my jQuery work with version 1.9.1?

So basically my whole site works with jQuery version 1.9.1. Although, I would like to use a plugin that only uses version 1.4.1. Is there something small that must be changed within this plugin code for it to be compatible with 1.9.1?

I have tried a few things like converting it to plain Javascript (had no luck) and trying to load version 1.4.1 aswel.. although that only caused many other things on my site to not work also.

$(document).ready(function () {

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});

        }).mousemove(function(e) {

            // Calculate the position of the image tooltip          
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

        }).mouseleave(function() {

            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });

These are the errors I am recieving:

Failed to load resource: the server responded with a status of 404 (Not Found) http://jqueryui.com/slider/jquery-ui.js
Uncaught ReferenceError: jq141 is not defined (index):574
2999 (index):660
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_glass_75_e6e6e6_1x400.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_flat_75_ffffff_40x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_highlight-soft_75_cccccc_1x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://dev.wizie.com/team/http://mangocell/favicon.ico
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

With each jQuery version some of the api methods are deprecated and removed and some other are added. I think your plugin is trying to access some of those removed methods from jQuery core. For a solution you could either find the new version of the plugin if its maintained or find a new plugin with same fetatures. You could also use jQuery migrate plugin, but it supports back only from version equal to or greater than jQuery 1.6.4. See more info here

Ok so after investigating I just tried that plugin in 1.9.1 and it worked just fine. I did not get any errors. I don't think 1.9.1 is your issue if your example is not working.
http://jsfiddle.net/NLw5F/

That is the plugin working in jQuery 1.9.1.

    $(document).ready(function () {

    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function(e) {

        // Calculate the position of the image tooltip
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index','15')
        .children("div.tooltip")
        .css({'top': y + 10,'left': x + 20,'display':'block'});

    }).mousemove(function(e) {

        // Calculate the position of the image tooltip          
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // This line causes the tooltip will follow the mouse pointer
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

    }).mouseleave(function() {

        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");
    });

});

Straight from the demo.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM