jquery - 使用 .on() 动态添加元素的日期选择器

Question

单击按钮时，我正在动态加载 HTML。然后该 html 将显示在模式窗口中。它包含一个<input type="text" class="datepicker"/>元素，我想为其附加一个日期选择器。我记得 jQuery 曾经支持.live()这种东西，但是已经被on(). 但是，我不确定如何正确使用on()：

$('.datepicker').on('load', function() { $(this).datepicker(); });

不起作用。

Answer 1

您需要使用 .on() 的事件委托语法

(document).on('focusin', '.datepicker', function() { $(this).datepicker(); });

Answer 2

你也可以试试这个

$(function(){
        $(document).on("click", ".datepicker", function(){

            if (!$(this).hasClass("hasDatepicker"))
            {
                $(this).datepicker();
                $(this).datepicker("show");
            }
        });
    });

Answer 3

实际上我使用了javascript代码。用于动态创建文本框的日期选择器。我无法在文本框中选择日期（第二行）。我正在发送我的代码，你可以检查并告诉我

//这里是日期选择器的javascript

$(function() {
    $( ".datepicker" ).datepicker({ 
        yearRange: "1980:c",
        maxDate: "+0D",
        changeMonth: true, 
        changeYear: true, 
        dateFormat: "mm/dd/yy",
        //showOn: "button",
        //buttonImage: "Images/calendar.gif",
        buttonImageOnly: true
    });

               $('.timepicker').timepicker({
                timeFormat: 'hh:mm'
               });
});

和用于 addrows 的 javacript 动态

function addRow(tableID) {


        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[2].cells.length;


        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[2].cells[i].innerHTML;
            //alert(newcell.innerHTML);
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                case "hidden":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                case "textarea":
                        newcell.childNodes[0].value = "";
                        break;
            }
        }
    }

用于使用表 id 添加行的 html

<td><input id="date" type="text" name="date[]"  class="datepicker" size="10"  value="<?php echo Convert_Date($rows1['date']); ?>"/></td>