Question: ```js
$( document ).ready(function() {

  $('#handler').on('click', '.selector', function(){
    alert( $(this).text());
  });

});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="handler">
  handler content
  <a href="#" class="selector">selector content</a>
</div>
```

How do I get the `#handler` inside the `on` method without explicitly specifying it?

Answer: 
Use the event "delegateTarget" property

```
$( document ).ready(function() {
    $('#handler').on('click', '.selector', function(e){
        console.log(e.delegateTarget);
    });
});

```

Working example:-

```js
$( document ).ready(function() {
  $('#handler').on('click', '.selector', function(e){
      console.log(e.delegateTarget);
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="handler">
  handler content
  <a href="#" class="selector">child</a>
  <div>
    <a href="#" class="selector">grand child</a>
  </div>
  <div>
    <div>
      <a href="#" class="selector">great grand child</a>
    </div>
  </div>
</div>
```
Change it to

```
$( document ).ready(function() {
  $('#handler').on('click', function(){
    //$(this) here will be #handler.
  });  
});

```

Or if you still want the function to fire when someone clicks on `.selector` then you can do the following

```
$( document ).ready(function() {
  $('#handler').on('click', '.selector', function(){
    var handler = $(this).parent();
  }); 
});

```