How to remove multiple event delegates using single undelegate method in jquery

Question

Can I make the following much simpler (instead of using 'undelegate' twice)?

$("#div1").undelegate("div", "mouseenter").undelegate("div", "mouseleave");

I don't want event handlers other than mouseenter and mouseleave to get disturbed.

Answer 1

Split your events with spaces.

$("#div1").undelegate("div", "mouseenter mouseleave");

You should use on and off though.

$("#div1").off("mouseenter mouseleave", "div");

http://api.jquery.com/undelegate/

The .undelegate() method is a way of removing event handlers that have been bound using .delegate(). As of jQuery 1.7, the .on() and .off() methods are preferred for attaching and removing event handlers.

Answer 2

In this specific case, you can use the shorthand .hover() for mouseenter and mouseleave.

​$("#div1").off("hover", "div");

​ .off() is the recommended way for removing event handlers as of jQuery 1.7.