如何创建与时间选择一个动态文本框

Question

我在一个应用的时候，有可能产生多个文本框，也是我需要添加timepicker到他们在我的申请，我能够动态创建文本框多发。现在工作。但我不能够把timepicker上that.Here是我的代码

$(function() { 
$("#btnAdd").bind("click", function() { 
    var div = $("<div />"); 
    div.html(GetDynamicTextBox("")); 
    $("#TextBoxContainer").append(div); 
}); 
$("#btnGet").bind("click", function() { 
    var valuesarr = new Array(); 
    var phonearr = new Array(); 
    var phonearr1 = new Array(); 
    $("input[name=DynamicTextBox]").each(function() { 
     valuesarr.push($(this).val()); 
     $('#DynamicTextBox').val(valuesarr); 
    }); 
    $("input[name=phoneNum]").each(function() { 
     phonearr.push($(this).val()); 
     $('#phoneNum').val(phonearr); 
    }); 

    $("input[name=phoneNum1]").each(function() { 
     phonearr1.push($(this).val()); 
     $('#phoneNum1').val(phonearr1); 
    }); 

    alert(valuesarr); alert(phonearr);alert(phonearr1); 
}); 

$("body").on("click", ".remove", function() { 
    $(this).closest("div").remove(); 
}); 

}); 


function GetDynamicTextBox(value) { 
    return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input id="myPicker" class="time" type="text" />&nbsp;<input name = "phoneNum1" type="text" /><input type="button" value="Remove" class="remove" />'; 
} 

这里是我想在第二和第三箱添加两个timepickers小提琴

DEMO 请人帮助

Answer 1

使用： $("#myPicker").timepicker(); //添加此添加click.if你愿意创建多个时间选择更好的使用class.you可以使用：$(".time").timepicker();也是在时间连接到输入域的类。

$(function() { 
 
    $("#btnAdd").bind("click", function() { 
 
     var div = $("<div />"); 
 
     div.html(GetDynamicTextBox("")); 
 
     $("#TextBoxContainer").append(div); 
 
     // $("#myPicker").timepicker();//add this 
 
     $(".time").timepicker(); 
 
    }); 
 
    $("#btnGet").bind("click", function() { 
 
     var valuesarr = new Array(); 
 
     var phonearr = new Array(); 
 
     var phonearr1 = new Array(); 
 
     $("input[name=DynamicTextBox]").each(function() { 
 
      valuesarr.push($(this).val()); 
 
      $('#DynamicTextBox').val(valuesarr); 
 
     }); 
 
     $("input[name=phoneNum]").each(function() { 
 
      phonearr.push($(this).val()); 
 
      $('#phoneNum').val(phonearr); 
 
     }); 
 
     
 
     $("input[name=phoneNum1]").each(function() { 
 
      phonearr1.push($(this).val()); 
 
      $('#phoneNum1').val(phonearr1); 
 
     }); 
 
     
 
     alert(valuesarr); alert(phonearr);alert(phonearr1); 
 
    }); 
 
    
 
    $("body").on("click", ".remove", function() { 
 
     $(this).closest("div").remove(); 
 
    }); 
 
    
 
}); 
 

 
function GetDynamicTextBox(value) { 
 
     return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input id="myPicker" class="time" type="text" />&nbsp;<input name = "phoneNum1" id="phoneNum1" class="time" type="text" /><input type="button" value="Remove" class="remove" />'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css"> 
 
<div id="TextBoxContainer"> 
 
<input id="btnAdd" type="button" value="Add" /> 
 
</div>