使用.on()动态添加元素的Datepicker

时间:2013-09-06 07:32:36

标签: jquery dom

单击按钮时,我正在动态加载HTML。那个html然后显示在一个模态窗口中。它包含一个<input type="text" class="datepicker"/>元素,我想附加一个日期选择器。我记得jQuery过去常常支持.live()这类东西,但已被on()取代。 但是,我不确定如何正确使用on()

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

不起作用。

3 个答案:

答案 0 :(得分:1)

您需要使用.on()

的事件委托语法
(document).on('focusin', '.datepicker', function() { $(this).datepicker(); });

答案 1 :(得分:1)

你也可以尝试这个

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

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

答案 2 :(得分:0)

其实我用的是javascript代码。 for datepicker用于动态创建的文本框。我无法在文本框中选择日期(第2行)。我发送我的代码可以请你检查并告诉我

//这里是datepicker的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'
               });
});

和动态添加的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>