Question

我在点击链接时尝试添加新行。但是jquery没有运行。在jsfiddle它运行但不添加新行。这是jsfiddle。 add_field（）添加在表单中不可见的新空输入。

    <script type="text/javascript">
    function add_field(){
        var cont = document.getElementById('addhere'); // refer to the div
        var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
            // create a div element
            var div1 = document.createElement('div');
            // Get template data
            div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
            // append to div, so that template data becomes part of document
            document.getElementById('addhere').appendChild(div1);   
    }

    $( ".datepick").each(function() {
      $( this ).datepicker({
        changeMonth: true,
        changeYear: true
      });
    });
    </script>

<form name="ExtendForm" id="ExtendForm" method="get" action="">
    <a href="javascript:void(0);" onClick="add_field();">Add new line</a>
    <BR>
    <div id="container1" style="position:fixed;">
        <div id="stid" style="float:left; width:200px;">
            Student ID
        </div>
        <div id="sdate" style="float:left; width:200px;">
            Start
        </div>
        <div id="fdate" style="float:left; width:200px;">
            Finish
        </div>
        <div id="addhere" style="float:relative; width:600px;">
            <div id="stid" style="float:left; width:200px;">
                <input type="text" name="studentid" id="studentid">
            </div>
            <div id="sdate" style="float:left; width:200px;">
                <input name="start" class="datepick">
            </div>
            <div id="fdate" style="float:left; width:200px;">
                <input name="finish"  class="datepick">
            </div>
        </div>

        <div id="fieldtpl" style="display:none;">
            <div id="stid" style="float:left; width:200px;">
                <input type="text" name="studentid" id="studentid">
            </div>
            <div id="sdate" style="float:left; width:200px;">
                <input name="start" class="datepick">
            </div>
            <div id="fdate" style="float:left; width:200px;">
                <input name="finish"  class="datepick">
            </div>
        </div>

        <div id="sbmt" style="width:600px; text-align:center">
            <input type="submit" name="saveForm" id="saveForm" value="Submit">
        </div>
    </div>
</form>

Answer 1

。它在这里工作。您需要从左侧选择正文选项。我在评论部分发布了该链接。检查一次

Answer 2

使用此...

$(document).ready(function(){
    setDatePicker();
});

$('#addLine').on('click', function(){
        var cont = document.getElementById('addhere'); // refer to the div
        var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
        // create a div element
        var div1 = document.createElement('div');
        // Get template data
        div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
        $('#addhere').append(div1.innerHTML);
        setDatePicker();
    });

function setDatePicker() {
    $( "#addhere .datepick").each(function() {
        $( this ).datepicker({
            changeMonth: true,
            changeYear: true
         });
    });
}

请参阅 DEMO

单击添加新行链接时，Jquery DatePicker不起作用

2 个答案: