Help us understand the problem. What is going on with this article?

【誤りあり】jQueryで追加した要素を操作するにはon()メソッドで

More than 3 years have passed since last update.

重要・この記事は誤った知識を元に書きました

この記事は、JS・jQueryの言語仕様をあまり理解していない時期に、jQueryを使った経験則を元にして書きました。
近いうちに修正版を書く予定ですが、時間がないため、参照程度にとどめてください。


概要

Ajaxなどで追加した要素に対して、.clickメソッドなどでの操作は行えない。
操作を行う場合、onメソッドでイベントを指定して操作する。

$(".bar").append("<a class=\"foo\" href=\"http://www.example.com\">Sample Text</a>");

$(document).on('click','.foo',function(){
  alert('fooがクリックされました');
  return false;
});

注意

1.8以前のjQueryにはon()メソッドが存在しない。
live()メソッドで対応を行う。

$(".bar").append("<a class=\"foo\" href=\"http://www.example.com\">Sample Text</a>");

$('.foo').live('click',function(){
  alert('fooがクリックされました');
  return false;
});

参考にしたサイト

jQuery の on() と off() を理解する - tacamy.blog

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away