テーブル内でブートストラップのdatepickerを有効にする方法はありますか？

Question

テーブルに行を追加するスクリプトがあります。各行にstart_dateとend_dateの2つの日付ピッカーテキストボックスがあります。私はbutton click event after the append内datepickerスクリプトを置く場合

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>"); 
}); 

、それが働いていますが、私は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示すことに失敗しています：あなたは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

ファーストそれ自体を入力します。したがって、最初のケースでは、date_setではなく、クラスdt_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/