在多个div上使用Jquery函数

时间:2015-05-07 13:31:21

标签: javascript jquery html datetimepicker

我正在开发一个项目,在某一点上你必须添加多个日期。问题是日期&时间选择器在第一组文本框上工作,不会对以下任何一个动态添加的文本框起作用。

以下是整个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 个答案:

答案 0 :(得分:0)

当您解雇$('.end').datetimepicker时,此时,jQuery将搜索具有类结尾的所有元素,并运行datepicker。当您添加动态元素时,对于每个元素,您必须再次运行该函数。

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