How to delegate event to add keith calender to an input text

JavaScript
1

I am adding rows of input dynamically using the following jquery code :

<script>
        $(document).ready(function() {
            var id = 0;
            // Add button functionality
            $("table.tblInd button.add").click(function(e) {
                e.preventDefault();
                id++;
                var master = $(this).parents("table.tblInd");
                // Get a new row based on the prototype row
                var rowToAppend = master.find(".rowDup").clone();
                rowToAppend.attr("class", "")
                rowToAppend.find(".id").attr("value", id);
                master.find("tbody").append(rowToAppend);
            });
            // Remove button functionality
            $(document).on("click", "table.tblInd button.remove", function(e) {
                e.preventDefault();
                  $(this).parents("tr").remove();
            });
        });
    </script>

**and my html is** 
<table class="tblInd" style="width:70%">
                <thead>
                    <tr>
                        <th style="width:2%">a</th>
                        <th style="width:23%">b</th>
                        <th style="width:23%">c</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="rowDup">
                        <td><select id = "new_select" id = "tea" class="sel2" name="teaID[]"></select></td>
                       <td><input type="text" name="visDate[]"  class="datePick"></td>

                        <td><button class="remove">Remove</button></td>
                    </tr>
                 </tbody>
            </table>

it is working great and the rows are added and removed.

=============================

and here is the code of the calender I am using.

<script>
        $(function(){
            //'use strict';
            var $dateInp = $('.rowDup');
            var calendar = $.calendars.instance('ummalqura');
            
            $dateInp.on('focus', '.datePick', function(){
                $('.this').calendarsPicker({calendar: calendar});
                $('#inlineDatepicker').calendarsPicker({calendar: calendar, onSelect: showDate});
            });
            function showDate(date) {
                alert('The date chosen is ' + date);
            }
        });
    </script>

MY PROBLEM is that I want the input with the class “datePick” to show the calendar whenever it is clicked

by the way, the calendar code is working fine. but it doesn’t work on the created rows.

2

It seems that I found the solution.
I manipulate the calendar code as following

<script>
        $(function(){
            var calendar = $.calendars.instance('ummalqura');
            $('table.tblInd').delegate('.datePick', 'focus', function(){
                //e.preventDefault();
                $(this).calendarsPicker({calendar: calendar});
                $('#inlineDatepicker').calendarsPicker({calendar: calendar, onSelect: showDate});
            });
            function showDate(date) {
                alert('The date chosen is ' + date);
            }
        });
    </script>

**

It is working fine now.

**

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.