Unbind a specific Jquery event by event pointer/reference

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

What you would get as a return value in both cases is the jQuery object for the <body>, not a unique reference — st3inn
– st3inn, Commented Oct 29, 2012 at 16:39
True, my example above is pseudo code- I'm trying to figure out how I can get a unique ID back instead of the Jquery object. — Nick
– Nick, Commented Oct 29, 2012 at 16:41
That won't work in this case, since the class(object) listening for changes should not modify the elements it's listening to. — Nick
– Nick, Commented Oct 29, 2012 at 16:47
MyEventPointer is a JavaScript object, not an event handler. — Felix Kling
– Felix Kling, Commented Oct 29, 2012 at 17:39

Jasper · Accepted Answer · 2012-10-29 17:52:08Z

2

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

edited Oct 29, 2012 at 17:52

answered Oct 29, 2012 at 16:43

Jasper

12k6 gold badges40 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Nick Over a year ago

That uses two functions. In my case, there can be only one function. The function is a method of a class, and the class has n instances in the document at any given time. The instance know when they are created and when they are about to be destroyed, but are not aware of other instances (by design). In order for delegation to work, the class has to attach the event to a wrapper that is known to exist outside of itself, in this case the body. All the instances are listening for the same thing, but when the event occurs, each instance needs notified so it can process the change by itself.

Jasper Over a year ago

Seriously, downvoting because there are additional restrictions not mentioned in your original question that I couldn't have known?

Jasper Over a year ago

@Nick: Whether or not that's even a problem depends on what technique you are using to emulate classes in javascript. And even when that's a problem, you can easily circumvent it by using "anonymous" functions which are stored as a class property (practically what you are doing in other strategies...). If you want me to be more concrete, you need to show me more code.

Nick Over a year ago

I was trying to keep the question as simple as possible- just a way to get a UID from event handler creation. But I can certainly post more code above if it would be useful.

Jasper Over a year ago

@Nick My code works for your sample, so yes, you'd need to post a new sample for which the code I provide does not work before I can modify my code to work in that case as well. The description you gave is reasonable, but it uses terms like "class" which doesn't actually have a meaning in javascript, and though that's usually not a problem, it is here.

|

The Alpha · Accepted Answer · 2012-10-29 17:22:56Z

0

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.

answered Oct 29, 2012 at 17:22

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

Nick Over a year ago

Will both handlers pickup MyCustomEvent (without a namespace) when it's triggered? ie. .trigger('MyCustomEvent')

The Alpha Over a year ago

@Nick, Yes if without a namespace then but I think why you should use it without a namespace.

Collectives™ on Stack Overflow

Unbind a specific Jquery event by event pointer/reference

Update:

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update:

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related