create dynamically buttons to show dialog

Question

I have a button (create) and when it's clicked, it creates a new button (Change coordinates) that should be able to open dialog when it's clicked.

First of all I created body of dialog window, I created this via JavaScript, this is just how it looks like in HTML:

<div id="dialog-form" title="Change coordinates">
  <p class="validateTips">Both fields are required.</p>
  <form>
    <fieldset>
    <label for="lon">Longitude (decimal)</label>
    <input type="text" name="lon" id="lon" value="" class="text ui-widget-content ui-corner-all">
    <label for="lat">Latitude (decimal)</label>
    <input type="text" name="lat" id="lat" value="" class="text ui-widget-content ui-corner-all">

    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

Now when create button is clicked I crate new button able to open dialog:

$( "#create" ).button().on( "click", function()
{
    var btn = document.createElement("BUTTON");
    btn.id = "change_coord";
    var t = document.createTextNode("Change coordinates");
    btn.appendChild(t);
    document.body.appendChild(btn);
});

And this is how my dialog looks like:

dialog = $( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons:{
                "Create an account": addUser,
                Cancel: function(){
                    dialog.dialog( "close" );
                }
          },
          close: function(){
                form[ 0 ].reset();
                allFields.removeClass( "ui-state-error" );
          }
});

Weird is that it works when I'm creating body of dialog and button to open it in

$(function()
{
....
});

But when I'm dynamically creating this button to open dialog it doesn't work at all.
HERE is my fiddle to show you my problem.

Answer 1

Per Charlietfl, who is correct "live" has been deprecated, but it does still remains a common solution to the problem. The other method I've used, which also works is:

$(document).on("mouseenter","#lsTMFmenu", function() {

However, I cannot get JQuery to work against dynamically loaded HTML using just $("#selector").on(), I must use $(document).on statement shown above.

Thanks.