Tomcatのタイムゾーン設定(Eclipse)
動的に後から追加したDOM要素にイベントを設定する(jQuery)
本記事では、動的に後から追加したDOM要素に
イベントを設定する方法を紹介します。
本記事の内容です。
何がしたいのか?
動的に後から追加したDOM要素にも動的にイベントを設定したい。今回は、hoge-textの後ろに動的にfuga-textを追加し、
hoge-textとfuga-textに対し、同じイベントを設定してみます。
駄目なソースコード
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/index.js"></script> </head> <body> <div id="container"> <input type="text" id="hoge-text"> </div> </body> </html>
$(function() { // この時点で生成されているコントロールにはイベントが設定される $('input').on('input', function() { console.log(this.value); }); // ここで追加したコントロールにはイベントが設定されない $('#container').after('<input type="text" id="fuga-text">'); });
うまくいくソースコード
HTML駄目なソースコードの時と同じです。
$(function() { // ドキュメント上すべてのinput要素に対して // inputイベントを設定する // onの第1引数にイベント名を // 第2引数に設定対象のid等を記述する $(document).on('input', 'input', function() { console.log(this.value); }); // ここで追加したコントロールにもイベントが設定される $('#container').after('<input type="text" id="fuga-text">'); });
JavaScriptのlinqで使用できる関数一覧
JavaScriptのlinqで使用できる
関数の一覧を作成したので、載せておきます。
本記事の内容です。
使用できる関数一覧
関数名 | 引数 |
---|---|
aggregate | seed, func, resultSelector |
all | predicate |
alternate | alternateValueOrSequence |
any | predicate |
asEnumerable | |
average | selector |
buffer | count |
cast | |
catchError | handler |
choose | selector |
concat | |
contains | value, compareSelector |
count | predicate |
defaultIfEmpty | defaultValue |
distinct | compareSelector |
distinctUntilChanged | compareSelector |
doAction | action |
elementAt | index |
elementAtOrDefault | index, defaultValue |
except | second, compareSelector |
finallyAction | finallyAction |
first | predicate |
firstOrDefault | predicate, defaultValue |
flatten | |
force | |
forEach | action |
groupBy | keySelector, elementSelector, resultSelector, compareSelector |
groupJoin | inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector |
indexOf | item |
insert | index, second |
intersect | second, compareSelector |
isEmpty | |
join | inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector |
last | predicate |
lastIndexOf | item |
lastOrDefault | predicate, defaultValue |
letBind | func |
log | selector |
max | selector |
maxBy | keySelector |
memoize | |
merge | |
min | selector |
minBy | keySelector |
ofType | type |
orderBy | keySelector |
orderByDescending | keySelector |
pairwise | selector |
partitionBy | keySelector, elementSelector, resultSelector, compareSelector |
reverse | |
scan | seed, func |
select | selector |
selectMany | collectionSelector, resultSelector |
sequenceEqual | second, compareSelector |
share | |
shuffle | |
single | predicate |
singleOrDefault | predicate, defaultValue |
skip | count |
skipWhile | predicate |
sum | selector |
take | count |
takeExceptLast | count |
takeFromLast | count |
takeWhile | predicate |
toArray | |
toDictionary | keySelector, elementSelector, compareSelector |
toJoinedString | separator, selector |
toJSONString | replacer, space |
toLookup | keySelector, elementSelector, compareSelector |
toObject | keySelector, elementSelector |
trace | message, selector |
traverseBreadthFirst | func, resultSelector |
traverseDepthFirst | func, resultSelector |
union | second, compareSelector |
weightedSample | weightSelector |
where | predicate |
write | separator, selector |
writeLine | selector |
zip |
JavaScriptで使用可能な関数のリファレンスが欲しいですね。
まぁ、.NETのLINQを移植したものなので、そちらを
確認したらよいのかもしれませんが。
FrontendのJavaScriptでlinq
FrontendのJavaScriptでlinqを使用できるので、linqそのものやJavaScriptのlinq、
使用するまでに行ったことを紹介していきます。
本記事の内容です。
そもそも、linqとは?
Microsoftが開発した、統合言語クエリです。様々なタイプのデータソース(配列等)に対する検索や抽出等の
操作を行うことができます。
詳細な説明は、下記のページがわかりやすいので、丸投げします。
LINQ - C# によるプログラミング入門 | ++C++; // 未確認飛行 C
JavaScriptのlinqとは?
上記のMicrosoftが開発したLINQを、JavaScript向けに移植したものです。元々は日本人のMicrosoft MVPである、
neue cc(Yoshifumi Kawai)氏が移植したものであり、
現在は、他の方がメンテナンスをされているようです。
GitHub - mihaifm/linq: linq.js - LINQ for JavaScript
ライセンス
下記の通り、MITライセンスです。linq/LICENSE at master · mihaifm/linq · GitHub
インストール方法
npm init
を実行し、package.jsonを作成した後、
npm install linq
を実行し、linqをインストールします。
使い方(サンプルコード)
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="node_modules/linq/linq.min.js"></script> <!-- この1行を追加 --> <script src="js/index.js"></script> </head> <body> </body> </html>
JavaScriptのサンプルコードについては、下記を参照してください。
linq/tutorial.js at master · mihaifm/linq · GitHub
.NETのLINQで使用できるメソッドは大体使用できそうです。
(手間だが、linq.jsファイルの中を検索し、対象のメソッドが存在するかを
確認しながら使用するのがいいかも?)
使用してみての疑問点
使用してみての疑問点を備忘録がてら記載しておきます。どなたかご存知の方がいらっしゃいましたら、教えてください。
任意継続(保険)の申請方法
退職してから任意継続の申請を行うにあたり、
調べたことをまとめていきます。
どんな書類が必要なの?
正社員として雇用されていた時に加入していた健康保険組合が定める書類が必要となります。
大体の場合、
「[正社員時代に加入していた健康保険組合] 任意継続」
で検索サイトで検索したら、出てくると思います。
私の場合は中部アイティ産業健康保険組合でしたので、
「中部アイティ産業健康保険組合 任意継続」と検索したら出てきました。
上記の場合だと、下記ページに記載されている
「任意継続被保険者資格取得申請書」、「同意書」の、
2つが必要となります。
退職後引き続き被保険者となる(任意継続被保険者) | 中部アイティ産業健康保険組合
書類はどこに提出したらいいの?
正社員時代に加入していた健康保険組合等に、郵送もしくは窓口へ直接提出したら良いらしいです。
組合によっては、メールでも可能なところがあるのかも?