title: Jquery not working with dynamically created table
body: <p>I have a simple webpage that uses the jquery template plugin to dynamically load data into a table using a json call on page load. In that table, I want to put buttons/div or anything clickable that I can then put a function on that will open a new page to edit the contents of that column.</p>
  
  <p>The problem is that none of the jquery stuff works in the buttons that I put in the table. If i put the same button out of the table (i.e. do not dynamically generate it) then it works fine but then I dont get one button per column.</p>
  
  <p>Here is what i have on the page load</p>
  
  <pre><code>$(document).ready(function() {
      $.ajax({
          type: 'POST',
          dataType: "json",
          url: "http://server:8000/categories/list",
          success: function (data) {
                  LoadCategories(data['CategoryList']);
          }
      });
  
      $(".editButton").button(); // using jquery-ui
      $(".editButton").click( function() {
          alert("Button has been clicked");
      });
  });
  </code></pre>
  
  <p>and my template looks like </p>
  
  <pre><code>   &lt;script id="catTemplate" type="text/x-jquery-tmpl"&gt;  
          &lt;tr id="$CategoryId"&gt;  
              &lt;td&gt; &lt;button id="edit-${CategoryId}" class="editButton"&gt; Edit&lt;/button&gt; &lt;/td&gt;
              &lt;td&gt; ${CategoryName}&lt;/td&gt;
              &lt;td&gt; ${OtherValue} &lt;/td&gt;
          &lt;/tr&gt;  
      &lt;/script&gt;  
  </code></pre>
  
  <p>The table loads properly and everything, its just that the jquery stuff is not applied to the dynamically generated stuff. Why is that and how can I get the buttons to do what I want?</p>