jquery - 删除 jQuery 的事件处理程序

Question

我在下面有这段代码：

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


    });

代码运行良好，但我想做的是在 3 mouseovers(mouseenter) 之后我想禁用 mouseenter 事件。不知道怎么解绑？

谢谢，吉姆

Answer 1

您应该在 mouseout 事件处理程序中移动取消绑定逻辑

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

可能最好在 mouseenter 处理程序上执行此操作以更准确

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

Answer 2

使用on()andoff()为此，类似：

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

Answer 3

有一个问题完美地回答了这个问题：Best way to remove an event handler in jQuery?

这是一个例子：

如果要添加单个事件然后将其删除（不删除可能已添加的任何其他事件），则可以使用事件命名空间：

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

并仅删除您的活动：

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