Uncaught Typeerror: $(...). live is not a Function

Question

Good afternoon,

by clicking on a tab in my project the error is returned: Uncaught Typeerror: $(...). live is not a Function.

Code:

function menu() {
    $('.nav-toggle').live('click', function() {
        if($(".nav-aberta").hasClass("side-fechado")) {
            $('.nav-aberta').animate({
                left: "0px",
            }, 100, function() {
                $(".nav-aberta").removeClass("side-fechado");
            });
        }
        else {
            $('.nav-aberta').animate({
                left: "-250px",
            }, 100, function() {
                $(".nav-aberta").addClass("side-fechado");
            });
        }
    });     
}

Function redo(){ var sizeJanela = $(window). width(); // $('.Nav-toggle'). Hide();

if (tamanhoJanela < 800) { 
    $('.nav-aberta').css('left', '-250px').addClass('side-fechado');
    $('.nav-toggle').css('display', 'initial');
} else {
    $('.nav-aberta').css('left', '0px').addClass('side-fechado');
}   
menu();

}

//Menu Sidebar
$(window).resize(function() {
    refazer();
});

$(window).load(function() {
    refazer();
}); 

$(document).ready(function() {
    refazer();
});

Can anyone tell me what it can be? I thank you in advance.

Answer 1

check the version of your jquery, because the .live was discontinued in version 1.7 and removed from version 1.9 onwards.

Source: http://api.jquery.com/live/

Tip: if your version is 1.7 or higher, you can use . on() as an alternative, for example:

$('.nav-toggle').on('click', function() {
    if($(".nav-aberta").hasClass("side-fechado")) {
        $('.nav-aberta').animate({
            left: "0px",
        }, 100, function() {
            $(".nav-aberta").removeClass("side-fechado");
        });
    }
    else {
        $('.nav-aberta').animate({
            left: "-250px",
        }, 100, function() {
            $(".nav-aberta").addClass("side-fechado");
        });
    }
});     

Answer 2

The use of $('.nav-toggle').on('click', function() { is not equivalent the use of $('.nav-toggle').live('click', function() { of the old API.

Namely the .live identified when the DOM was modified and applied the events again, so much so that the link itself http://api.jquery.com/live/ that the other answer points out exactly how it should be done:

$( >>>>SELECTOR<<< ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( >>>>SELECTOR<<<, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, >>>>SELECTOR<<<, data, handler );        // jQuery 1.7+

That is to say if you use version 1.4.3 up to 1.6 you should use it like this:

function menu() {
    $(document).delegate('.nav-toggle', 'click', function() {
        if($(".nav-aberta").hasClass("side-fechado")) {
            $('.nav-aberta').animate({
                left: "0px",
            }, 100, function() {
                $(".nav-aberta").removeClass("side-fechado");
            });
        }
        else {
            $('.nav-aberta').animate({
                left: "-250px",
            }, 100, function() {
                $(".nav-aberta").addClass("side-fechado");
            });
        }
    });     
}

Now using in versions 1.7 until the current (version 3) must use the .on, thus:

function menu() {
    $(document).on('.nav-toggle', 'click', function() {
        if($(".nav-aberta").hasClass("side-fechado")) {
            $('.nav-aberta').animate({
                left: "0px",
            }, 100, function() {
                $(".nav-aberta").removeClass("side-fechado");
            });
        }
        else {
            $('.nav-aberta').animate({
                left: "-250px",
            }, 100, function() {
                $(".nav-aberta").addClass("side-fechado");
            });
        }
    });     
}