I am creating a modal dialog box. First I append an iframe to the `body` tag to act as my overlay.

```
<div class="modal-screen">
  <iframe src="javascript:false;"></iframe>
</div>

```

Then I append my dialog box to the `body`.

```
<div class="dialog">
  <!-- various dialog related elements
</div>

```

Now I would like to close the dialog when the user clicks the overlay. The problem is that I can't seem to bind to any events related to the overlay.

To summarize my JS, basically my dialog view has an `initialize` method where the overlay is prepared:

```
initialize: function() {
  this.modal = $('<div class="modal-screen"><iframe src="javascript:false;"></iframe></div>')

  this.modal.on('click', function(e) {
    // this event never seems to fire
    console.log("hello");
  }
}

```

Then I render into the page when I need it. When I click the overlay, I never see `hello`..

```
render: function() {
  $('body').append(this.modal);
  // append other dialog content
  this
}

```