私は現在、フォームに追加のフォーム要素を追加し、datepickerを追加するコードを扱っています。
私は既存のコードに「イベントリスナー」(Chandler Zwolleのスクリプトのおかげでhttps://stackoverflow.com/a/24767578/1025961)を追加しましたが、datepickerをフォーム要素で処理するのにはいくつかの問題があります。 console.logの呼び出しが 'イベントリスナー'のコード内で動作しているようですが、datepickerはそうではありません。ダイナミックフォームのイベントリスナーZebra Datepicker
(注:2つの特殊Zebra_Datepickerファイル(https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.js)及び(https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/css/default.css)に加えて、私はまた、動的に追加されたフォームの「noConflict」コマンドのjQuery 1.10.2と、jQueryの2つの異なるバージョンを使用しています要素コード、Zebra DatePicker用のJquery 2.1.3。私のサイトのバージョンは、このフィドルのものと同じように動作しますが、JSFiddleに2番目のバージョンを追加する方法はわかりません。
ありがとうございました。
私のコードは以下のとおりです。
A. HTMLフォーム
<table>
<tr>
<td><button type="button" id="add-btn">Add Class Year</button></td>
<td></td>
</tr>
<tr class="class_yr">
<td class="FormLabel" width="100px"><strong>Class Year*</strong></td>
<td width="100px"><input type="text" id="ClassYear_1" name="ClassYear_1" class="ClassYear" value="2004" tabindex="4" /></td>
</tr>
</table>
B. JSコード
//var numeric = $(this).attr('id').match(/(\d+)/)[1]
$(".ClassYear").each(function() {
num = parseInt(this.id.split("_")[1], 10);
id_string_prefix = "#ClassYear";
id_string_combined = id_string_prefix.concat(num);
$(id_string_combined).off();
console.log(id_string_combined);
// Re-add event handler for all matching elements
$(id_string_combined).on("click", function() {
// Handle event.
$(id_string_combined).Zebra_DatePicker({
view: 'years',
readonly_element: true
});
});
});
}
$(document).ready(function() {
// Call our function to setup initial listening
RefreshSomeEventListener();
function clone2() {
var $cloned = $('table tr.class_yr:last').clone();
var $oldIndex_name = $cloned.find('input').attr('name').match(/\d+/); //
var $oldIndex_id = $cloned.find('input').attr('id').match(/\d+/); //
var $newValue = $cloned.find('input').val('');
//
var newIndex_name = parseInt($oldIndex_name, 10) + 1;
var newIndex_id = parseInt($oldIndex_id, 10) + 1;
//console.log(newIndex_name);
$cloned.find('input').each(function() {
var newName = $(this).attr('name').replace($oldIndex_name, newIndex_name);
$(this).attr('name', newName);
});
$cloned.find('input').each(function() {
var newId = $(this).attr('id').replace($oldIndex_id, newIndex_id);
$(this).attr('id', newId);
});
$cloned.insertAfter('table tr.class_yr:last');
//console.log('hello');
}
$('#add-btn').click(function() {
clone2();
//console.log('hello');
// Refresh our listener, so the new element is taken into account
RefreshSomeEventListener();
});
});
ご協力いただきありがとうございます。あなたが提供したURLを貼り付けたとき、私は警告を受けましたが無視しました。あまりにも多くの側面を追跡するのではなく、そのタイプのリンクはJSFiddleのサンプルスクリプトを起動させませんか? – buck1112
上記のURL変更を反映するようにJSFiddleが更新されました。 – buck1112