Question

我想使用jquery在输入字段中动态添加日期选择器。它适用于第一个文本字段。当我添加一个字段时，它不起作用。我该如何解决这个问题？提前致谢。

<table class="table table-bordered" id="dynamic_field">
    <tr>
       <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
       <td><input type="text" class="startdate form-control"/></td>
       <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
</table>

Jquery的

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

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

日期选择器

 $( ".startdate" ).datepicker({
  dateFormat: 'dd/mm/yy',
  changeMonth: true,
  changeYear: true,
  minDate: 0,
});

Answer 1

在动态创建的输入上使用on()实现datepicker。另请注意append() $(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append(`<tr id="row${i}"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button></td></tr>`); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); }); $(document).on("focus", ".startdate", function(){ $(this).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); });在<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table>内使用哪个更清洁，更简单：

from time import *
from tkinter import *
def time_check():
    s = time()
    e = time()
    while s-e <=1:
        e= time()

count =0
def start():
    st (count)

def st (count):
    while count <=10 and time_check():
        count+=1
        label.configure(text=count)


root = Tk()
label = Label(root,text=count)
label.pack()
btn = Button(root, text='click here', command=start)
btn.pack()
root.mainloop()

<div class="add-contact-btn" fxFlex="10">
     <button mat-raised-button (click)="openDialog($event)">add contact</button>
</div>

Answer 2

将datepicker（）函数添加到上次创建的输入

使用

$('#dynamic_field').last("tr").find(".startdate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate: 0,
  });

同样，当删除此输入时，您还必须销毁附加到它的datepicker，如下所示

  $( '#row' + button_id ).datepicker( "destroy" );
  $( '#row' + button_id ).removeClass("hasDatepicker").removeAttr('id');

见下面的摘录：

$(function() {

var i = 1;
$('#add').click(function() {
  i++;
  $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td > <button type = "button" name = "remove"id = "' + i + '" class = "btn btn-danger btn_remove" > X </button></td ></tr>');
  
  $('#dynamic_field').last("tr").find(".startdate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate: 0,
  });
  
});


$(".startdate").datepicker({
  dateFormat: 'dd/mm/yy',
  changeMonth: true,
  changeYear: true,
  minDate: 0,
});

$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $( '#row' + button_id ).datepicker( "destroy" );
  $( '#row' + button_id ).removeClass("hasDatepicker");
  $('#row' + button_id+'' ).remove();
});

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />

<table class="table table-bordered" id="dynamic_field">
  <tr>
    <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
    <td><input type="text" class="startdate form-control" /></td>
    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
  </tr>
</table>

在jquery中动态添加类

2 个答案: