0

リンクをクリックしたときに新しい行を追加しようとしています。しかし、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>
4

2 に答える 2

0

.ここで動作しています.左側からbodyオプションを選択する必要があります.コメントセクションにリンクを投稿しました.一度確認してください

于 2013-05-15T13:09:47.350 に答える