title: How do I dynamically add an jquery ui event handler to a dynamically created button?
body: <p>I have a jquery ui modal dialog box form that adds items to a table.  One of the table columns is my link to edit the row in question.  This is a button object and I want to add an event handler that when the user clicks on the button, it run a ajax query to pull back the information for the selected lines ID and display that data in a form for the user to edit the selected row.</p>
  
  <p>I am trying to get it to use the same function</p>
  
  <pre><code>$( ".edit-user" )
    .button()
    .click(function() {
      //do something here
  });
  </code></pre>
  
  <p>Here the code that create the dynamic row with the edit button.  I am trying to get the "click" event handler to be attached to the dynamically created button.</p>
  
  <pre><code>        $( "#users tbody" ).append( "&lt;tr&gt;" +
            "&lt;td&gt;&lt;button class=\"edit-user\" id=\"edit-user-15\"&gt;Edit&lt;/button&gt;&lt;/td&gt;" +
            "&lt;td&gt;" + mc_last_name.val() + "&lt;/td&gt;" +
            first_name +
            "&lt;td&gt;" + mc_primary_address.val() + "&lt;/td&gt;" +
            "&lt;td&gt;" + mc_primary_city.val() + "&lt;/td&gt;" +
            "&lt;td&gt;" + mc_primary_state.val() + "&lt;/td&gt;" +
            "&lt;td&gt;" + mc_primary_zipcode.val() + "&lt;/td&gt;" +
            phone + 
            email_address +
            "&lt;td&gt;" + mc_primary_addcommunity.val() + "&lt;/td&gt;" +
          "&lt;/tr&gt;" );
  
          $(".edit-user").on('click','button',function(){
              var parameters = {
                  "cid":this.id.replace(/\D/g,"")
              };
  
          $.ajax({
                  url : "./getcontact.php",
                  type: "POST",
                  data : parameters,
                  success: function(data, textStatus, jqXHR)
                  {
                      var arr = data.split('|||');
  
                      $.each(arr,function(key,value) {
                          var temp = value.split(':::')
                          $("#" + temp[0]).val(temp[1]);
                      });
  
                      $( "#dialog-form" ).dialog( "open" );
                  },
                  error: function(jqXHR, textStatus, errorThrown)
                  {
                    alert(errorThrown);
                  }
              });
          });
  </code></pre>
  
  <p>I have tried several different options:</p>
  
  <pre><code> $('#edit-user-15').on('click', 'button', function() {
       //Run the display form function.
   });
  
   $('#edit-user-15').delegate('click', 'button', function() {
       //Run the display form function.
   });
  </code></pre>
  
  <p>I am relatively new to jquery...so these kinds of weird errors are hard to explain what I am trying to do.</p>
  
  <p>Looking for thoughts on how to make the any button on the table to use the special function?</p>
  
  <p>Thannks
  jlimted</p>