How to use jQuery's on(..) to dynamically bind to multiple events

Question

I am trying to create leverage jQuery's `.on()` (ex-`live()`) to bind multiple events. It is working for elements which exist on `document.ready`, but if I dynamically add a second link after page load, my event handler isn't triggered. This makes sense since the outer-most method iterates over the elements, and doesn't listen for newly added DOM nodes, etc. The `.on(..)` is what listens for new DOM nodes, but requires an event name params, which I don't have until I have the DOM node. Seems like a chick and the egg sort of situation. Thoughts? ``` Test 1 Test 2 $(function() { $('.js-test').each(function() { var $this = $(this); var e, events = $this.data('test-events'); for(e in events) { $this.on(events[e], function() { console.log("hello world!") }); } }); }); ``` Update, The following does seem work either; `$(this)` doesn't appe…

Accepted Answer

```
$('a.js-test').on('click mouseover', function(event) {
  // you can get event name like following
  var eventName = event.type; // return mouseover/ click
  console.log(eventName);
  // you code
  console.log('Hello, World!');
});
```

Sample example

If you want something like live event then:

```
$('body').on('click mouseover', 'a.js-test', function(event) {
  // you can get event name like following
  var eventName = event.type; // return mouseover/ click
  console.log(eventName);
  // you code
  console.log('Hello, World!');
});
```

According to your last edit try this:

```
$('.js-test').on($('.js-test').data('test-events'), function() {
    console.log("hello world!")
});
```

Sample example for edit

and for live event delegation

```
$('body').on($('.js-test').data('test-events'), '.js-test', function() {
    console.log("hello world!")
});
```

How to use jQuery's on(..) to dynamically bind to multiple events

Solution

Problem