動的に後から追加した要素(リスト)に対してのクリックイベント(JavaScript)

動的に後から追加した要素(リスト)に対して、クリックイベントを発生させる方法を書きます。

jQueryを利用したコードになります。

以下、HTML。

以下、JavaScript。

実際の動きは、jsdo.itで見ることができます。

jsdo.it – 動的に後から追加した要素(リスト)に対してのクリックイベント

間違えて、

$(‘#addlist li’).on(‘click’, function () {

のようにしてしまうことがありますが、これは既に生成されているli要素のみにイベントハンドラを登録します。

それを

$(‘#addlist’).on(‘click’, ‘li’, function () {

とすることで、新しく生成されたli要素にもイベントハンドラを適用できます。

スポンサーリンク