$().live is not a function - JavaScript/jQuery

Question

In Firefox I suddenly got this message from firebug:

$('a.close, #fade').live is not a function

Indeed, when I click the image gallery and popup displays. I cannot close out of it. The click event never registers due to this error message.

This is script:

        $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel');  
        var popURL = $(this).attr('href');  

        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1];  

        //Fade in the Popup and add close button

        var div_popup = document.createElement('div');
        div_popup.setAttribute('id',popID);
        div_popup.setAttribute('class','popup_block');
        document.body.appendChild(div_popup);

        $(div_popup).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a> <a href="thumbBg' + $(this).attr('rel').substring($(this).attr('rel').lastIndexOf('p') + 1,$(this).attr('rel').length) + '"></a><p>The Human Diet: By Rene Endara</p>');

        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft        
        });

        $('body').append('<div id="fade"></div>');  
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); 
        return false;
    });

    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() {  
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
        });
        return false;
    });

markup:

    <ul class="thumb">
    <li><a href="#?w=500" rel="popup1" class="poplight"><img src="images/thumb1.jpg" alt="" /></a></li>
    <li><a href="#?w=500" rel="popup2" class="poplight"><img src="images/thumb2.jpg" alt="" /></a></li>
    <li><a href="#?w=500" rel="popup3" class="poplight"><img src="images/thumb3.jpg" alt="" /></a></li>
    <li><a href="#?w=500" rel="popup4" class="poplight"><img src="images/thumb4.jpg" alt="" /></a></li>
   </ul>

Thanks for response.

Solution 1

.live() was introduced in jQuery 1.3, therefore it won't work with earlier versions.

.live() has also since been deprecated in jQuery 1.7 onwards.

The alternatives are .on() and .delegate()

See related question jQuery 1.9 .live() is not a function on how to migrate existing code.

Solution 2

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

Since .live() is deprecated as of jQuery 1.7+, you have to use either .on() or .delegate().

See related question jQuery 1.9 .live() is not a function on how to migrate existing code.

Solution 3

For anyone else who is using >= v1.9 please see here about depreciation: jQuery 1.9 .live() is not a function

Solution 4

Tente usar .bind no lugar de .live

Try to use .bind instead of .live

View more solutions

Comments

[Marko]

What version of jQuery are you using?

[Evan Carroll]

This simply isn't true, .live( eventType, handler ) was added in 1.3, see the docs. Maybe he is using a version older than that though...

[JohnMerlino]

Well, somehow I was using 1.2 something. So it definitely wasn't supported. I typically point it directly to the internet, but it's definitely good to know when certain jquery methods are and are not supported because it was driving me crazy.

[Scott Harwell]

@Evan, I meant 1.3...my mistake.

[jocull]

This is important now that it's completely removed in 1.9

[ProblemsOfSumit]

this is the correct answer for almost everyone who's having this issue in 2013...