$(…).on is not a function - jQuery Error

Question

I am using dialog box, which I am closing when a user click anywhere on page expect that dialog box.

Here is my code:

$('body').on('click','.ui-widget-overlay',function()
{ 
    $('#myRateSettingsPopup').dialog('close'); 
}); 

Somehow its returning an error:

$(...).on is not a function

What is wrong with my code ?

I am using jquery-1.6.1.min.js , but I cannot update it to the latest version. I am bound.

Is there any other way to do this ?

Answer 1

As jquery 1.6.1 is not supporting on so you can use live

$('body').live('click','.ui-widget-overlay',function(event)
{ 
          event.stopPropagation();        
          $('#myRateSettingsPopup').dialog('close'); 

});

Answer 2

The replacement for .on() in jQuery > 1.4.2 is delegate()

$('body').delegate('.ui-widget-overlay', 'click', function () {
    $('#myRateSettingsPopup').dialog('close');
});

Answer 3

Try live instead of on its a jquery version problem

$('body').live('click','.ui-widget-overlay',function()
{ 
    $('#myRateSettingsPopup').dialog('close'); 
}); 

Answer 4

Method on was introduced in jQuery version 1.7.

I think you have to upgrade your jQuery library to the newest version.

Otherwise, you can use bind:

$( ".ui-widget-overlay" ).bind( "click", function(e) {
    $('#myRateSettingsPopup').dialog('close');
    e.stopPropagation(); 
});

Answer 5

$( ".close" ).bind( "click", function(e) {
$('#popup1').hide();
    e.stopPropagation(); 
});

jquery-1.7 jqueryui/1.8.2 perfect.

or your overlay

$( ".YOUR OVERLAY" ).bind( "click", function(e) {
$('#YOUR POPUP').hide();
   e.stopPropagation(); 
});