Question

我想将datepicker插件与动态构建的表单一起使用。当我使用类datepick静态构建表单时，jquery函数工作正常，但是当我尝试使用jquery追加文本输入构建时，它不起作用。这是我正在使用的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Monroe Community Hospital" />
    <script type="text/javascript" src="../jsstuff/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../jsstuff/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <link rel="stylesheet" href="../jsstuff/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"/>
    <link rel="stylesheet" href="../jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.css"/>
    <link rel="stylesheet" type="text/css" href="../empinc.css"/>
    <link rel="stylesheet" href="../mch.css"/>
    <script type="text/javascript" src="../jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#addform").click(function(){
                $("form").append('<div class="incident"></div>');
                $("div.incident").append('<label class="title">TO BE COMPLETED BY THE SUPERVISOR</label><br />');
                $("div.incident").append('<div><input type="text" id="incidate" name="incidate" class="datepick" /></div>');  
            });
        });
        $(function(){
            $(".datepick").datepicker({
            changeMonth: true,
            changeYear: true
            });
        });
    </script>
</head>
<body>
  <form>
   <input type="button" id="addform" value="Add form" />
  </form>
</body>
</html>

当我点击添加表单时，表单会构建，但我没有获得datepicker日历。如果删除jquery追加函数并以静态形式使用相同的元素，它就可以工作。

Answer 1

<强> FIDDLE：

http://jsfiddle.net/UW5nU/4/

使用委托方式。参考已有的元素。它可以是动态添加内容的任何主体或最近元素。添加动态元素的方式不正确。请更改您的代码，如下所示。

$("#addform").on("click",function(){
    var formContent = "<div class='incident'>";
    formContent += "<label class='title'>TO BE COMPLETED BY THE SUPERVISOR</label><br/>";
    formContent += "<div><input type='text' name='incidate' class='datepick'/></div></div>";
    $("form").append(formContent);
});

$('form').on('focus',".datepick", function(){
    $(this).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

注意： ID属性应该是唯一的。因此，请删除日期选择器输入中的ID

Answer 2

非常感谢提示。这是功能的变化。我像你提到的那样在追加后插入了datepicker函数。

<script type="text/javascript">
        $(function(){
            $("#addform").click(function(){
                $(".incident").remove();
                $("form").append('<div class="incident"></div>');
                $("div.incident").append('<div><label class="title">TO BE COMPLETED BY THE SUPERVISOR</label></div>');
                $("div.incident").append('<div><input type="text" id="incidate" name="incidate" class="datepick" /></div>');  
                $(function(){
                    $(".datepick").datepicker({
                    changeMonth: true,
                    changeYear: true
                });
                });
            });
        });
    </script>

谢谢

我正在尝试将jquery插件功能添加到动态构建的表单中

2 个答案: