Question

我知道这个问题已被问了很多年，但在阅读了很多与此相关的问题后，我仍然可以实现我想要的目标。

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

当我单击按钮添加表格行时，它会正确添加到模态中。但是，所有输入的日期选择器同时触发（没有使用类似的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();});

现在数据贴纸将附加到该元素。

如何将datepicker附加到单个动态插入输入字段？

1 个答案: