jQueryにおけるデリゲーション

JavaScriptを学んだことがあれば、新しい要素に対するイベントの追加の問題などを解決するために使用できるイベントデリゲーションのトピックに出会ったことがあるでしょう。jQueryではどのように見えるかを見てみましょう。

次のHTMLコードを例に取ります：

<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>

そのCSSは次のようになります：

li {
	width: 100px;
	cursor: pointer;
}

では、前のレッスンで行ったように、リスト項目liではなく、リスト自体ulにonメソッドを使ってclickメソッドをバインドし、子孫セレクタとして（オプションの）2番目のパラメータに'li'を渡します。結果を見てみましょう：

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

ulが与えられ、その中に複数のliがあります。ulの下にボタンを作成し、クリックするとテキスト'項目'を持つ新しいliがulの末尾に追加されるようにします。各liをクリックすると、その末尾に'!'が追加されるようにしてください。これは新しく追加されたliに対しても機能する必要があります。タスクはデリゲーションを使用して解決してください（つまり、イベントはulに設定されている必要があります）。

名と姓の2列を持つユーザーのテーブルが与えられます。テーブルの下に、新しいユーザーをテーブルに追加するために使用できるフォームを作成します。任意のセルをクリックするとpromptが表示され、それを使ってセルのテキストを変更できるようにしてください。タスクはデリゲーションを使用して解決してください（つまり、イベントはtableに設定されている必要があります）。