Question

Let’s say the following code exists in template_A popping up a dialog which displays content from template_B.

The html is presented fine in the dialog but unfortunately any javascript included in template_B does not run.

Jquery & Jquery-ui are included in template_A.

template_B has no javascript-includes as it is represented by a div belonging to template_A.

JS in template_A :

var win = $(document.createElement('div'));
$.get(url, function (html) {
  win.html(html);
  win.dialog("open");
});

template_B :

<div id="content">

  <script type="text/javascript">
    $(function () {
      // this never executes,
      // js-debugging won't enter this part...
    });
  </script>

</div>

Answer 1

The code block you’re talking about is only triggered once the DOM is finished loading. Just inserting html into an existing document doesn’t trigger this event. If there’s a lot of HTML you’re getting from this request, maybe you should break it up into two separate requests like so:

var win = $(document.createElement('div'));
$.get(urlA, function (html) {
  win.html(html);
  $.getStript(urlB);
  win.dialog("open");
});

Where urlA requests the HTML and urlB requests the Javascript.