jquery datepicker无法动态添加表行

Question

这是动态添加表格行的javascript代码。

 <script type="text/javascript">
     $(document).ready(function () {
         $(document).on("click", ".classAdd", function () { 
             var rowCount = $('.data-contact-person').length + 1;
             var MyDiv = '<tr>' +
                 '<td style="width:6%; padding-left:10px;"><input type="text" name="DateS' + rowCount + '" class="form-control pull-left DateR"/></td>' +
                 '<td style="width:35%; padding-left:5px;"><input type="text" name="STA' + rowCount + '" class="form-control l-name01" style="width:98%"/></td>' +
                 '<td style="width:18%"><input type="text" name="CB' + rowCount + '" class="form-control email01" style="width:98%"/></td>' +
                 '<td style="width:20%"><input type="text" name="Venue' + rowCount + '" class="form-control email01" style="width:98%"/></td>' +
                 '<td style="width:20%"><button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                 '</tr>';

             $('#Mytable').append(MyDiv); 

         });
     });
</script>  

这是我的datepicker。它位于我的内容页面下方

<script type="text/javascript">
$('.DateR').datepicker({
    autoclose: true
});
</script>

添加表行没有问题，我的问题是在添加的行上，jQuery Datepicker无效。