jQuery off when on was defined with anonymous function

Question

I have a function that registers an event handler with a callback that will receive only some of the event data.

My problem is I want to protect against the function registering multiple time by calling .off before .on but I'm not sure how to specify the callback to .off in this case as it has to be the same function used by .on

For example:

function myclick(elem, callback) {
  //elem.off('click', ???? ); // how should this be specified
  elem.on('click', function (e) {
     callback(e.target);
  }
}

I am looking for a general solution that is not jQuery dependent as this can happen with any library that provides on and off functionality.

Use [event delegation](https://learn.jquery.com/events/event-delegation/) to bind events on dynamically created elements. `$(staticParentSelector).on('click', 'dynamicElementSelector', function...` — Tushar, Jan 19 '16 at 04:11

score 3 · Answer 1 · edited May 23 '17 at 11:59

3

One way to do this is to use event namespacing which will make sure that only the handlers with the given namespace is removed others are not.

function myclick(elem, callback) {
  elem.off('click.myradomnamespace').on('click.myradomnamespace', function (e) {
     callback(e.target);
  }
}

But if you are doing this to handle dynamic element's use event delegation

edited May 23 '17 at 11:59

Community

1
1

answered Jan 19 '16 at 04:13

Arun P Johny

384,651
66
527
531

thx .. I am looking for a general solution that is not jquery dependent as this can happen with any library that provides on and off functionality. – kofifus Jan 19 '16 at 04:16
@kofifus then please don't use the jQuery label when asking questions. – Mottie Jan 19 '16 at 04:17
@kofifus each library can have its own logic on how to handle such cases.... one general solution could be to use a function reference not a anonymous function – Arun P Johny Jan 19 '16 at 04:21
exactly but how to specify this function reference ? – kofifus Jan 19 '16 at 04:22

score -1 · Answer 2 · answered Jan 19 '16 at 04:19

-1

The next param is the delegate(function) you was passed before, if you dont know which delegatewas passed before, just simple pass '**' to delete all delegate:

elem.off('click', '**');

For more refer: http://api.jquery.com/off/
Hope this can help you!

answered Jan 19 '16 at 04:19

Tan Mai Van

657
6
8

thx. I don't want to delete all delegates, only those set by myclick – kofifus Jan 19 '16 at 04:21
This is will remove all delegate mapping with click event in your element. If that you only need to remove specify delegate, you will need pass the delegate in the second param. – Tan Mai Van Jan 19 '16 at 04:24
Sorry I cannot write full code in the comment, but you can bring the function inside the on click to a function with name, the you can use the function name to pass to both on and off `elem.on('click', function (e) { callback(e.target); }` to `elem.on('click', newFunction); elem.off('click', newFunction)` – Tan Mai Van Jan 19 '16 at 04:31
yes but what will newFunction look like ? it needs to receive callback somehow and be unique with that callback .. – kofifus Jan 19 '16 at 08:59
It's the function you put in the on click, simple like this: `function newFunction = function (e) { callback(e.target); }` That is clear for you now? – Tan Mai Van Jan 19 '16 at 10:46

jQuery off when on was defined with anonymous function

2 Answers2