2016-10-12 23 views
0

ハイパーリンクをクリックすると、JSPページに新しい行を追加しようとしています。javascriptを使用してjspページに新しい日付行を追加

正常に動作しますが、新しい行に日付機能class="dateTxt"が機能しません。以下は、jsp関数とjavascript関数の詳細です。

のjavascript:

function addNewRow(addingNewRow){ 

    var table = document.getElementById("addingNewRow"); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    var cell6 = row.insertCell(5); 
    var cell7 = row.insertCell(6); 
    cell1.innerHTML = cell1.innerHTML + '<td><input type="number" value="" size="10"></td>'; 
    cell2.innerHTML = cell2.innerHTML + '<td><input type="number" value="" size="10"></td>'; 
    cell3.innerHTML = cell3.innerHTML + '<td><input type="number" value="" size="10"></td>'; 
    cell4.innerHTML = cell4.innerHTML + '<td><input type="number" value="" size="10"></td>'; 
    cell5.innerHTML = cell5.innerHTML + '<td><input id="effDate3" class="dateTxt" type="text" ></td>'; 
    cell6.innerHTML = cell6.innerHTML + '<td><input id="discDate3" class="dateTxt" type="text" ></td>'; 
    cell7.innerHTML = cell7.innerHTML + '<td><select id="action" name="actionId"><option value="-1" selected="selected">--Select One--</option><option value="0" >Add</option><option value="1" >Edit</option><option value="2" >Delete</option></select></td>'; 
} 

日付機能:

$(function(){$('.dateTxt').datepicker({dateFormat: 'yy-mm-dd'}); }); 

JSPの:

href="#" onclick="addNewRow('addingNewRow')">Add More Parameters 

答えて

0

あなたは新しい行のための日付ピッカーを初期化する必要があります。あなたのaddNewRow()機能の最後にこの行を実行してください。

$(function(){$('.dateTxt').datepicker({dateFormat: 'yy-mm-dd'}); }); 

これは機能しますが、イベントを動的チャイルドにバインドするためにはjquery.on()を読むべきです。

+0

ありがとうございます.. !!!!!それは私のために働いた。 –

+0

しかし、私はスクリプトタグの下ですでにその関数を定義していました。なぜそこから摘出されていないのですか? –

+0

プラグインを初期化するときに新しい行がDOMに存在しないためです。 DOMに追加する新しい要素にイベントを '伝播'する必要があります。 – mauriblint

関連する問題