在多个 div 上使用 Jquery 函数

Question

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

这是完整的 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 结尾的元素，以及运行日期选择器。当您动态添加元素时，对于每个元素，您必须再次运行该函数。

喜欢newTextBoxDiv.find(".end").datetimepicker();

在多个 div 上使用 Jquery 函数

Using a Jquery Function on multiple divs

javascript

jquery

html

datetimepicker