Jquery BootstrapTimepicker无法处理动态生成的字段

BootstrapTimePicker

无法处理使用

jquery

动态生成的输入字段

我使用jquery生成了表单中的动态字段，其中一个字段使用bootstraptimepicker，而该字段不起作用。我不知道为什么。我已经包括了代码并附上了下面的图片

预定时间*
预订数量*
@*
&时代*@
----------剧本---------------
$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x预订时间*预订计数*”）；
}
});
/*生成动态场*/
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
x--；
})
})
$（“.ScheduledTime”）.timepicker（）；

您需要在新添加的字段上重新初始化时间选择器

//AFTER adding new field
$('#my-new-dynamic-element').timepicker()

---

你需要在正确的事件中使用on，我想这就是你做错的地方。 假设您有

body

作为包装器，并且可以通过

选择新创建的输入元素。引导计时器输入

，这样您就可以实现您想要的：

$('body').on('DOMNodeInserted', ".bootstrap-timepicker input", function() {
        $(".bootstrap-timepicker input").timepicker();
});

---

我自己找到了答案。我刚刚重新初始化了$（“.ScheduledTime”）.timepicker（）； 在按钮单击事件中生成动态字段的行之后，该事件在addmore单击时生成动态字段。谢谢大家的帮助：）

var x=1//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x预订时间*预订计数*”）；
$（“.ScheduledTime”）.timepicker（）；
}
});

在向DOM添加新字段后，是否尝试重新初始化它？e、 我已经在$（添加按钮）上重新初始化了时间选择器。单击（函数（e）{}但它仍然不起作用。是的，我最初错过了。这是因为您的选择器太有限。阿米尔的答案应该有效…或者选择窗口/文档而不是正文。我尝试了阿米尔的方法，但这甚至不起作用。@KovidPurohit此代码段似乎不起作用。您能在站点上创建一个独立的小提琴吗或者在这里共享代码？那么你可能应该接受我刚刚取消删除的第一个答案。注意注释掉的行…//AFTER“感谢Proeviz，您的建议帮助了我，我已经解决了这个问题。我甚至应该感谢尝试帮助我的Amir。实际上，之前我在生成动态数据的行之前重新初始化了bootstraptimepicker，所以最初它不起作用，但后来我找到了解决方案Running timepicker（）每次添加元素后都不是解决方案，这只是一个肮脏的解决方法。因此，阿米尔，你能为我推荐一些其他替代方法吗？你应该在文档中运行整个过程。首先准备好了！

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();


            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                debugger;
                $(wrapper).append('<div><br/><a href="#" class="remove_field">Remove</a><div class="control-label col-sm-2">Booking time <span class="red">*</span></div><div class="input-group bootstrap-timepicker timepicker col-sm-3 " style="padding-left: 10px; padding-right: 9px; float:left"><input id="ScheduledTime" type="text" name="bookingtime[]" class="form-control input-sm ScheduledTime"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span></div><div class="control-label col-sm-2">Booking Count <span class="red">*</span></div><div class="col-sm-1"><input id="bookingcount" type="number" min="0" name="bookingcount[]" class="form-control input-sm"></div><div class="clearfix"></div></div>');

                $(".ScheduledTime").timepicker();

            }
        });