How to use .removeClass() to disable jquery function

Question

I want the button click to remove the class "hover-on" so that the hover function becomes disabled, but once the DOM loads it removes the class, but the hover function still works.

I am using the following code.

//Click this 
$('button').click(function() {
    $('#main-div').removeClass('hover-on');
});

//Remove class to disable this hover function
$('.hover-on').hover(function() {
    blah blah blah
});

Answer 1

The event doesn't have anything with the CSS class. You need to unbind the event:

$('button').click(function() {
    $('#main-div').removeClass('hover-on').unbind("hover");
});

$('.hover-on').hover(function() {
    blah blah blah
});