title: $.each with (live,bind,delegate) jQuery
body: <p>Can someone help me with this code:</p>
  
  <pre><code>var rows = $(".delete"); //rows to delete
  var irows = $(".insert");//rows to insert
  //delete row
  $.each(rows, function(i ,v) {
      $(v).click(function() {
          $(this).closest("tr").fadeOut(300, function() { $(this).remove(); });               
      });
  });
  
  //insert row before
  $.each(irows, function(i, v) {
      $(v).click(function() {
          var irowIndex = $(this).closest("tr").index();
          var newRow = "&lt;tr class=\"dataRow\"&gt;" + "
                      "&lt;td&gt;&lt;input type=\"button\" value=\"&amp;#8597\" class=\"drag\" /&gt;&lt;input type=\"button\" value=\"&amp;#187;\" class=\"insert\" /&gt;&lt;input type=\"button\" value=\"x\" class=\"delete\" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='hidden' name='records_id[]' /&gt;&lt;input style=\"text-align: center\" type='text' class='itemno' name='existing_itemno[]' size='5' /&gt;&lt;/td&gt;" +
                      "&lt;td&gt;&amp;nbsp;&lt;/td&gt;" +
                      "&lt;td&gt;&amp;nbsp;&lt;/td&gt;" +
                      "&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;";
          $("#tbox tr:eq(" + irowIndex + ")").before(newRow);
      });
  });
  
  &lt;table id="#tbox"&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Adding and deleting row works, but the button in the added rows that triggers the delete/insert does not work. I mean if you add a row and you click delete button on that row, it won't work. I've already searched the web, and I found <code>bind()</code>, <code>live()</code>, and <code>delegate</code>. The problem is how I can use it inside <code>.each</code>. Or is there a better approach than this? Please help.</p>