Question: My program is designed to change and save user settings. The program consists of many usercontrols. I need to show message to the user to save the settings before closing the application when it was produced at least one unsaved changing.
There are too many controls and it will be inefficiently to define an event for each control.I don't sure that it is only one way to solve my problem. Any advice please..

Answer: 
```
$(document).on('hover', '.box', function(e) {
  if( e.type == 'mouseenter') {
    $(this).children('.menu').stop(true, true).fadeIn(fadeIn);
  } else {
    $(this).children('.menu').stop(true, true).fadeOut(fadeOut);
  }
});

```

Instead of `document` it would be better to use any parent element of `.box` which is not dynamic.

Read about **[`.on()`](http://api.jquery.com/on)**.

Syntax of `.on()` for delegate event (aka live event) is:

```
$( StaticParent ).on( eventName, target, handlerFunction );

```
For **exact** `.on` equivalent:

```
$(document).on({
    mouseenter: function() {
        $(this).children('.menu').stop(true, true).fadeIn(fadeIn);
    },
    mouseleave: function() {
        $(this).children('.menu').stop(true, true).fadeOut(fadeOut);
    }
}, '.box');

```

Though the main benefit here is that you don't need to use `document`, you can just use the closest parent that is guaranteed to exist for the lifetime of the page.