CODEWITHSUNDEEP
jqueryevents
jim dif
jim dif

Reputation: 641

Removing an event handler for jQuery

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

Upvotes: 0

Views: 133

Answers (3)

Claudio Redi
Claudio Redi

Reputation: 68400

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");
        }
    })

Upvotes: 2

adeneo
adeneo

Reputation: 318192

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);​

Upvotes: 1

Lemex
Lemex

Reputation: 3794

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');

Upvotes: 0

Related Questions