title: Adding new row, binding of datepicker to cloumn works in weird manner
body: <p>I am trying to add a new row on button click. In my new row there is one Textbox with which I want to bind datepicker but not able to. Please help me to resolve this issue.</p>
  
  <pre><code>&lt;table&gt;
       &lt;tr&gt;
       &lt;td&gt;&lt;button type="button" onClick ="addRow(this)"&gt;Add&lt;/button&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
       &lt;td&gt;&lt;input type="text" name="installDate" value="" class ="date"/&gt; &lt;/td&gt;        
       &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).on('click', function() {
  $('.date').each(function() {
          $(this).datepicker();
  });
  });
  
  function addRow(btn) {         
      var parentRow = btn.parentNode.parentNode;
      var table = parentRow.parentNode;
      var rowCount = table.rows.length;
      var lastRow = table.rows[rowCount - 1];
      var rowClone = lastRow.cloneNode(true);
      table.appendChild(rowClone);
      $('.date', rowClone).datepicker(); // Code to fix the problem
  }
  </code></pre>
  
  <p>Seq1: Add Row => Click on textbox of newRow, calender pops up and everything works fine.</p>
  
  <p>Seq2: 
  1. Click on document and then try on textbox of original row, then calender pops up.
  2. Add new row.
  3. now click on textbox of new row, calender never pops up to select the date. </p>
  
  <p>Attaching JSFiddle for reference
  <a href="http://jsfiddle.net/wAyhm/9/" rel="nofollow">http://jsfiddle.net/wAyhm/9/</a></p>