在多个div上使用Jquery函数[重复]

Question

这个问题已经在这里有了答案：

• 将datepicker（）放在动态创建的元素上-JQuery / JQueryUI 12 answers

我正在做一个项目，在某个项目上您必须添加多个日期。 问题在于日期和时间选择器可在第一组文本框中使用，而不适用于以下任何动态添加的文本框。

这是完整的Javascript代码（不同的日期和时间选择器以及添加其他文本框的功能）：

<script type="text/javascript">
    $(document).ready(function(){
        $('.end').datetimepicker({
            datepicker:false,
            format:'H:i:s',
            step:5
        });
        $('.start').datetimepicker({
            datepicker:false,
            format:'H:i:s',
            step:5
        });
        $('.date').datetimepicker({
            timepicker:false,
            lang:'de',
            format:'Y-m-d',
            formatDate:'Y-m-d'
        });
        var counter = 2;

        $("#addButton").click(function () {
            if(counter>10){
                    alert("Only 10 textboxes allow");
                    return false;
            }   
            var newTextBoxDiv = $(document.createElement('div'));
            newTextBoxDiv.attr("id", 'TextBoxDiv'+counter);
            newTextBoxDiv.attr("class", 'termin');

            newTextBoxDiv.after().html('<label>Termin #'+ counter + ' : </label>' +
                                       '<input type="textbox" class="date"   name="datum' + counter + '">' + 
                                       '<input type="textbox" class="start" name="start' + counter + '">' + 
                                       '<input type="textbox" class="end" name="end' + counter + '">');
            newTextBoxDiv.appendTo("#TextBoxesGroup");

            counter++;
         });
      });
</script>

Answer 1

当您触发$('.end').datetimepicker ，此时jQuery将搜索所有具有class end的元素，并运行datepicker。 动态添加元素时，必须为每个元素再次运行该函数。

像newTextBoxDiv.find(".end").datetimepicker();