title: How can I convert this javascript / jQuery into a "not inline" function?
body: <p>I hvae the following code:</p>
  
  <pre><code>$(".openDialog").live("click", function (e) {
      e.preventDefault();
  
      $("&lt;div&gt;&lt;/div&gt;")
      .addClass("dialog")
      .attr("id", $(this).attr("data-dialog-id"))
      .appendTo("body")
      .dialog({
          title: $(this).attr("data-dialog-title"),
          close: function () { $(this).remove() },
          modal: true
      })
      .load(this.href);
  });
  $(".close").live("click", function (e) {
      e.preventDefault();
      $(this).closest(".dialog").dialog("close");
  });
  </code></pre>
  
  <p>Can someone explain how I can decouple the functions form the actions? I am a bit confused with how to do this. </p>
  
  <p>Also what is the purpose of "live" ?   I heard before someone suggesting "on". Is "on" better than "live" and how does it actually work?</p>