Using a Jquery Function on multiple divs

Question

I am working on a project, where at one point you have to add multiple dates. The Problem is that the Date & Time Pickers work on the first set of textboxes, won't work on any of the following, dynamically added textboxes.

Here is the whole Javascript Code(The different date & time pickers & the function to add additional textboxes):

<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>

Why don't you just apply the datepicker to the dynamic elements _after_ their creation? — Jeremy Thille, May 07 '15 at 13:35

score 0 · Accepted Answer · answered May 07 '15 at 13:38

when you fire $('.end').datetimepicker, at this moment, jQuery will search for all elements with class end, and run the datepicker. when you add dynamically elements, for each element you must run the function again.

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

Using a Jquery Function on multiple divs

1 Answers1