Question

What I need is something like:

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

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

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

MyEventPointer is a pointer to a specific event handler. Even though the two event handlers are exactly identical, only one is unbound because they have different unique identifiers, returned on creation. This should work like the way I can store a reference to a timer in a variable and disable the timer again later using its reference. I know Jquery stores Unique IDs for events, but I don’t know if I can get to them. Is this possible to do with Jquery or will I need to role my own solution? The event needs to be delegated so that both current and future instances of .myClass are included.

Update:

Sample Code:

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

Answer 1

You can do that like this:

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

---

More specifically in your case with classes, you can easily apply the above pattern and it works:

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

(You might want to check to make sure that this.event isn’t null and set it to null in the constructor, or maybe it’s more efficient to declare this.event in the constructor to be this function, or something like that, but this basically does the job.)