Removing an event handler for jQuery

Question

I have this code below:

 jQuery.noConflict();
    var x=0;
    myw=0;
    oin="";
    jQuery(document).ready(function () {
        if(x >3){
            $("img:odd").unbind("mouseenter");
            return false;
        }        
        jQuery("img:odd").mouseenter(function(e) {
          //  oin="";
            console.log(e);
            console.log(this);
            console.log(this.src);
            oin=this.src;
            this.src="snowdrop.png";
            myw=this.width;
            this.width=100;
            x=x+1;
            console.log(x);
           jQuery(this).css("opacity", 0.5);
        }).mouseout(function(e) {
            this.width=myw;
            this.src=oin;
           jQuery(this).css("opacity", 1.0);
        });


    });

The code runs fine but what I want to do is after 3 mouseovers(mouseenter) I want to disable the mouseenter event. I can't figure out how to unbind it?

Thanks, Jim

Claudio Redi · Answer 1 · 2012-08-29T13:28:27.190

You should move your unbind logic inside the mouseout event handler

    }).mouseout(function(e) {
        this.width=myw;
        this.src=oin;
        jQuery(this).css("opacity", 1.0);
        if(x == 3){
            $("img:odd").unbind("mouseenter");
            $("img:odd").unbind("mouseout");
        }
    });

Probably is better to do this on mouseenter handler to be more accurate

    jQuery("img:odd").mouseenter(function(e) {
      //  oin="";
        console.log(e);
        console.log(this);
        console.log(this.src);
        oin=this.src;
        this.src="snowdrop.png";
        myw=this.width;
        this.width=100;
        x=x+1;
        console.log(x);
        jQuery(this).css("opacity", 0.5);
        if(x == 3){
            $("img:odd").unbind("mouseenter");
            $("img:odd").unbind("mouseout");
        }
    })

score 1 · Accepted Answer · answered Aug 29 '12 at 13:26

1

Use on() and off() for this, something like:

(function($) {
    var x=0,
        myw=0,
        oin="";

    $('img:odd').on({
        mouseenter: doStuff, //bind a function, it's easier to rebind
        mouseleave: function() {
           this.width=myw;
           this.src=oin;
           $(this).css("opacity", 1.0);
        }
    });


    function doStuff(e) {
        var elem = e.target;
        if (x>3) {
            $(elem).off('mouseenter'); //unbind the event
            return;
        }else{
            x++;
            oin=elem.src;
            elem.src="snowdrop.png";
            myw=elem.width;
            elem.width=100;
            $(elem).css("opacity", 0.5);
        }
    }
})(jQuery);

answered Aug 29 '12 at 13:26

adeneo

312,895
29
395
388

I found this to work the best. But I also added $(elem).off('mouseleave'); because even after the mouseenter was removed what was happening was images were still being swapped. – jim dif Aug 29 '12 at 13:54
Yes, sometimes removing both handlers is necessary! – adeneo Aug 29 '12 at 14:10
This got me started correctly but I also had to change all references to for example elem.width=100 TO this.width=100 - the reason being is nothing was happening to the image the code above was trying to make the width of the EVENT 100 pixels wide. But in theory it was the best. – jim dif Aug 29 '12 at 14:15

score 0 · Answer 3 · edited May 23 '17 at 12:04

Theres a question that answer this perfectly: Best way to remove an event handler in jQuery?

Heres an example:

If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

and to remove just your event:

$('#myimage').unbind('click.mynamespace');

Removing an event handler for jQuery

3 Answers3