CODEWITHSUNDEEP
javascriptjquery
Nick
Nick

Reputation: 11384

Unbind a specific Jquery event by event pointer/reference

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

Upvotes: 1

Views: 146

Answers (2)

Jasper
Jasper

Reputation: 11908

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

Upvotes: 2

The Alpha
The Alpha

Reputation: 146191

If you want to use different identical events on an element I mean if you want to register more than one event handler on the same element then you can use event namespace, i.e.

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

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

Remove the first handler using the event namespace and in this case it;s nameSpaceOne

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

An example Here.

Upvotes: 0

Related Questions