CODEWITHSUNDEEP
jquery
user007
user007

Reputation: 3243

jQuery - check if class exists if no destroy a function

I am trying to destroy a function depending on existence of a CSS class.

I want to check for class .active, this class is toggled by clicking a button. I tried using

if(jQuery(#test).hasClass('.active')

but it only work once, if I remove .active still this function is running whereas I want to destroy it after removal of .active class.

I also tried .unbind() but no use.

Please tell me how do I destroy this function totally after removal of .active class

    function destroy_no_active_class(){
         jQuery('#test.active').mouseover(function (e) {
                e.stopPropagation();e.preventDefault();
                jQuery(this).addClass('highlight');
            }).mouseout(function () {
                jQuery(this).removeClass('highlight');
            }).click(function(e){
                e.stopPropagation();
                e.preventDefault();
                show_data(this);
            });

        });
   }

Upvotes: 1

Views: 611

Answers (3)

nbrooks
nbrooks

Reputation: 18233

Assuming by 'destroy the function' you simply mean you want it to stop highlighting the element, you can simply check within the handler once it's triggered, and execute the logic conditionally. This is also more useful than unbinding the handler, since it will automatically work again if the element becomes 'active' again.

function destroy_no_active_class(){
    jQuery('#test').on('mouseover.mine mouseout.mine', function (e) {
            if ($(this).is(".active")) {
                e.stopPropagation();
                e.preventDefault();
                jQuery(this).toggleClass('highlight');
            }
        }).on('click.mine', function(e){
            if ($(this).is(".active")) {
                e.stopPropagation();
                e.preventDefault();
                show_data(this);
            }
        });
    });
}

Within the handler, you could alternatively do

if (!$(this).is(".active")) {
    $(this).off('mouseover.mine mouseout.mine click.mine');
}

The downside here is that, if the element becomes active again, you have to rebind the handlers. (Note $ is simply an alias for jQuery. If you have a naming conflict, just substitute jQuery for the $ in the code above as you have been doing.)

Upvotes: 4

dc5
dc5

Reputation: 12441

If I understand the question correctly, you want to remove your event handlers after you are done with them.

If that is the case, you will either need to

  1. keep a reference to the handler function so you can pass it when you remove you event handlers
  2. use jQuery's event.namespace capability

As of jQuery 1.7 on/off is the preferred method of adding event handlers:

function myhandler(e) {…}

$('#test').on('click', myhandler);
$('#test').off('click', myhandler);

Upvotes: 1

Ringo
Ringo

Reputation: 5483

.unbind() is the right way to remove event behaviors.

Your code has errors in it. Be careful about the selectors you're using, and whether they should have quotes around them.

if ($('#test').hasClass('active')) {
  $('#test').unbind().removeClass('active');
}

Upvotes: 1

Related Questions