通过事件指针/引用解除绑定特定的Jquery事件

时间:2012-10-29 16:32:44

标签: javascript jquery

我需要的是:

var MyEventPointer = $('body').on('MyCustomEvent','.myClass',function(e){
   // do something
});

var MyEventPointer2 = $('body').on('MyCustomEvent','.myClass',function(e){
   // do something
});

$('body').unbindByEventID(MyEventPointer);

MyEventPointer是指向特定事件处理程序的指针。尽管两个事件处理程序完全相同,但只有一个是未绑定的,因为它们具有不同的唯一标识符,在创建时返回。这应该像我可以在变量中存储对计时器的引用的方式,并在以后使用其引用再次禁用计时器。我知道Jquery存储事件的唯一ID,但我不知道我是否可以访问它们。这可能与Jquery有关,还是我需要自己的解决方案?需要委派该事件,以便包含.myClass的当前和未来实例。

更新

示例代码:

<tr><td><input class="MyWidget" /></td></tr>
<tr><td><input class="MyWidget" /></td></tr>
<tr><td><input class="MyWidget" /></td></tr>
<!-- Repeats n times, rows are added and deleted dynamically -->    

JavaScript的:

// Creation
$('.MyWidget').MyWidget();


// The plugin
$.fn.MyWidget = function (options) {
   return this.each(function () {
      new ATK.MyWidget(this, options);
   });
};

// The widget class
ATK.MyWidget = function (element, options) {
   // constructor
}
ATK.MyWidget.prototype = new ATK.ParentWidget();

ATK.MyWidget.prototype.SetFilterEvent = function(Selector) {
   var base = this;   
   $('body').on('MyCustomEvent',Selector,function(e){base.eMyCustomEvent(e,this)});
}

ATK.MyWidget.prototype.eMyCustomEvent = function(e,eventThis) {
   console.log(this.protected.$element.attr('id')+' has detected that '+$(eventThis).attr('id')+' has changed.');
}

2 个答案:

答案 0 :(得分:2)

你可以这样做:

function MyEventPointer1(e){
   // do something
});

function MyEventPointer2(e){
   // do something
});

$('body').on('MyCustomEvent','.myClass', MyEventPointer1);
$('body').on('MyCustomEvent','.myClass', MyEventPointer2);

$('body').off('MyCustomEvent','.myClass', MyEventPointer1);

更具体地说,在您使用类的情况下,您可以轻松应用上述模式,它可以工作:

ATK.MyWidget.prototype.SetFilterEvent = function(Selector) {
    this.event = function(e) {this.eMyCustomEvent(e, this);}
    $('body').on('MyCustomEvent',Selector,this.event);
}

ATK.MyWidget.prototype.RemoveFilterEvent = function(Selector) {
    $('body').off('MyCustomEvent',Selector,this.event);
}

(您可能需要检查以确保this.event不为null并在构造函数中将其设置为null,或者将构造函数中的this.event声明为此函数或者更类似那,但这基本上可以完成这项工作。)

答案 1 :(得分:0)

如果你想在元素上使用不同的相同事件,我的意思是如果你想在同一元素上注册多个事件处理程序,那么你可以使用event namespace,即

$('body').on('MyCustomEvent.nameSpaceOne','.myClass',function(e){
    // do something
});

$('body').on('MyCustomEvent.nameSpaceTwo','.myClass',function(e){
    // do something
});

使用event namespace删除第一个处理程序,在这种情况下使用{s nameSpaceOne

$('body').off('MyCustomEvent.nameSpaceOne', '.myClass'); 

An example Here