.unbind (). click (function () is a good practice

Question

  .unbind (). click (function () {
   // todo smth
 }

It looks a bit quirky for me, however it makes sense: the developer wanted to remove any events in the element and then link the click element.

Could you think of a better solution to this problem? Or correct my type of thought;)

Answer 1

This is not a good practice because you do not control which click events become unrelated. To improve this, there are two different approaches:

Use event namespaces (faster)

You can use the namespace to control that you only disable the click event that you are going to bind again:

$(selector).off('click.namespace').on('click.namespace', function(e) { //... 

Use classes (fastest)

Use the classes added to the link to mark them as registered (this does not bind previously related events, but helps prevent multiple event bindings, which is a problem, in most cases you would use off (unbind) to on (bind):

 $(selector).not('.registered').addClass('registered').on('click', function(e) { //... 

You can even turn this into a little sexy plugin by writing:

 $.fn.register = function(register_class) { register_class || (register_class = 'registered'); // lets you control the class return this.not('.' + register_class).addClass(register_class); }; 

That way you can just call register for each selector:

 $(selector).register().on('click', function(e) { //... 

Or with a specific class if "registered":

 $(selector).register('special_handler_registered').on('click', function(e) { //... 

Performance?

If you are wondering about the performance of different handlers:

Check out this performance test here.

Answer 2

I followed this approach when I had to “update” some button, link, ect., Behavior, and I think nothing happened to this. But keep in mind that with the help of the code you delete every handler attached to the element (s). So instead:

 $(selector).unbind('click').click(function(){ // do something }) 

Answer 3

Well, at least it's good practice to indicate which event handlers should be unrelated. Therefore, if there was some kind of click hendler event, and we want to untie only it, then we can use unbind('click') .

Answer 4

Since there may be some other handlers in addition to yours, it makes sense to use namespaces.

 $(selector).off('click.myns').on('click.myns', function() {....}) or $(selector).unbind('click.myns').bind('click.myns',function() {...}) 

This way you will only touch your own handler, and not some others, for example, added by jquery plugins

Answer 5

I usually try to use the functions of the named event when possible, so that they can be decoupled explicitly:

 $('a').unbind('click.myfunc').bind('click.myfunc', function(evt) { ... }); 

Thus, you can add this binding to the init function, which can be executed several times (convenient for situations where you cannot use the delegate for any reason).

In general, I would not try to untie every event, or even every handler of a certain event, if I do not need it.

I also try to stay up to date and replace all bind / unbind calls with on / off; -)