javascript - 如何将日期选择器附加到单个动态插入的输入字段？

Question

我知道这个问题已经被问了很多年，但在阅读了这么多与此相关的问题后，我仍然能够实现我想要的。

我有一个包含一堆输入字段的表这些输入字段使用 jQuery UI 日期选择器。还有一个用于添加表格行的按钮。

当我单击按钮添加表格行时，它会正确添加到模式中。但是，所有输入的日期选择器同时触发(没有使用类似的ID)。

模态代码:

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form class="form-horizontal" id="edit-form">
              <div class="form-group">
                <label for="date" class="col-sm-2 text-left">Date</label>
                  <div class="col-sm-10">
                    <div class="table-responsive">  
                      <table class="table table-bordered" id="dynamic_field">  
                          <tr>  
                            <td><input type="text" name="date" placeholder="Enter date"  class="form-control usedatepicker"/></td>  
                            <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                          </tr>  
                      </table>  
                    </div>                     
                  </div>  
              </div>                
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
            </form>
      </div>
</div>

JS代码:

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="data" placeholder="Enter date" class="form-control usedatepicker" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
           $(".usedatepicker").datepicker();    

      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
 });  

Answer 1

是的，因为 Jquery 的问题，您无法将事件附加到 Jquery 的动态元素。为了解决这个问题，您需要引用 DOM 上以前的可用元素作为主选择器，如下面的代码所示。

$('body').on('focus',".class_of_dynamic_element", function(){
$(this).datepicker();});

现在数据选择器将附加到该元素。