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

Posted 2023-05-07

【中文标题】在多个 div 上使用 Jquery 函数 [重复]

【英文标题】：Using a Jquery Function on multiple divs [duplicate]

【发布时间】：2015-07-18 02:47:33

【问题描述】：

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

这是整个 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>

【问题讨论】：

为什么不把日期选择器应用到动态元素在创建之后？

是的，您必须在添加 框后对其进行增强。

【参考方案1】：

当您触发$('.end').datetimepicker 时，此时，jQuery 将搜索所有以类结尾的元素，并运行日期选择器。当您动态添加元素时，对于每个元素，您必须再次运行该函数。

点赞newTextBoxDiv.find(".end").datetimepicker();