jquery-dialog cannot make use of jquery-functions

Question

I pass some html coming from a get-request to my Jquery-dialog function.

Inside the dialog however I cannot make use of any jquery-functions anymore although I have included jquery in the page calling the dialog.

If I include it AGAIN in the dialog's html the dialog's "ok"-button stops to work and all other stuff on the page from which I have called the dialog also does not work anymore after having closed the dialog.

I would expect that having included jquery in the page which calls the dialogue would suffice for the dialogue to have access to jquery but this does not seem to be the case.

Here's the code I have:

dialog.js :

var dialogDiv = $(document.createElement('div'));

function myDialogue(content) {
  dialogDiv.html(content);
  dialogDiv.dialog({autoOpen: false, modal: true, buttons: { "ok": function() {
  $(this).dialog("close");
  $(this).dialog("destroy").remove();
} } });
dialogDiv.dialog('open');
dialogDiv.scrollTop(0);
return true;
}

call to myDialogue =>

main.html:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/dialog.js"></script>

$.get("/path/to/controller/index", {param: "value"}, function(content) {
  myDialogue(content);
});

the html returned from my controller which is passed to the dialog:

<script type="text/javascript">
  $(document).ready(function() {
    $("#edit_div :checkbox").click(function () {
    // this NEVER gets called unless I include jquery again, but 
    // then the ok button and the rest of the page do not work anymore.
    alert("checked!!!");
    });
  });
</script>
<div id="edit_div">
<input type="checkbox" value="mycheck" name="mycheck"/>
....

Answer 1

The document.ready event which you've wrapped your function in only gets called when the page is first loaded.

You could try taking the function out of the document.ready wrapper and placing the whole script tag at the end of the markup you're sending from your controller.