如何激活表中的bootstrap datepicker？

Question

我有一個腳本，將一行添加到表中。每行有兩個日期選擇器文本框start_date和end_date。

var rows = ""; 
$("#btn_add").on('click', function(i){ 
    var ct_row = $("#t_activity tr").not('.header').length+1; 

    rows  = "<td class='text-center'><div class='date_set date_2'>"; 
     rows += "<input type='text' class='form-control date dt_set' placeholder='start' onCopy='return false'"; 
     rows += " onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' />"; 
    rows += "</div></td>"; 

    rows += "<td><div class='date_end date_2'>"; 
     rows += "<input type='text' class='form-control date dt_end' placeholder='Finish' onCopy='return false'"; 
     rows += " onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' />"; 
    rows += "</div></td>"; 

    $("#t_activity").append("<tr class='tr_content'>"+rows+"</tr>"); 
}); 

如果我把datepicker腳本button click event after the append裏面，它的工作，但我需要處理button event外datepicker。這是datepicker腳本：

//START 
    $('.date_set .date').datepicker({ 
     startView   : 0, 
     forceParse   : true, 
     autoclose   : true, 
     format    : "dd/mm/yyyy", 
     todayHighlight  : true, 
    }).on('changeDate', function(selected){ 
     var minDate = new Date(selected.date.valueOf()); 
     $('.date_end .date').datepicker('setStartDate', minDate); 
    }); 

    $('.date_end .date').datepicker({ 
     startView   : 0, 
     todayBtn   : "linked", 
     forceParse   : true, 
     autoclose   : true,  
     format    : "dd/mm/yyyy", 
     todayHighlight  : true, 
    }).on('changeDate', function (selected) { 
     $('.date_set .date').datepicker('setEndDate', selected.date); 
    }); 
//END 

我試圖改變這樣的劇本，但它未能表現出datepicker：

$("#t_activity tbody").on('click','.date_set .date',function(){ 
    $(this).closest('tr').find('div .dt_set').datepicker({ 
     startView   : 0, 
     forceParse   : true, 
     autoclose   : true, 
     format    : "dd/mm/yyyy", 
     todayHighlight  : true, 
     }).on('changeDate', function(selected){ 
      var minDate = new Date(selected.date.valueOf()); 
      $('.date_end .date').datepicker('setStartDate', minDate); 
    }); 
}); 

Answer 1

首先，你需要聲明爲datepicker是什麼輸入本身。因此，在第一種情況下，它將是dt_set類，而不是date_set。

其次，使用委託方法時，你可以使用focus事件，而不是click事件

$('#t_activity').on('focus',".dt_set", function(){ 
}); 

演示：https://jsfiddle.net/zw4a8pfv/

或者，如果您使用的是tbody您table你也可以申報它作爲波紋管

$('#t_activity tbody').on('focus',".dt_set", function(){ 
}); 

演示：https://jsfiddle.net/zw4a8pfv/1/