【jQuery】jQueryでclickイベントが発火しない罠

はじめに

jQueryでclickイベントを取得する処理を記載したのだが、意図した通りに動作しなかったのでその原因を調べたのでメモる。

原因

元々存在するDOMに対してclickイベントを設定した時は期待通りの動作をするのだが、
appendなどをしようして動的にDOMを生成した場合、期待した動作にならなくなります。

そのため

$('nameClass).click(function() {
    alert('クリック!');
});

$(document).on('click', '.nameClass', function(){
    alert('クリック!');
});

のように書き換えてあげると期待した動作になるみたい。
一応下記にサンプルソースを載せておきます。

サンプル

【NGパターンのソース】

<!DOCTYPE html>
<html>
  <head>
    <title>TableSample</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>名前</th>
          <th>年齢</th>
        </tr>
      </thead>
      <tbody id ="result">
      </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script>
      $(function() {
        var jsonData = [
          { "name": "山田", "age": 21 },
          { "name": "佐藤", "age": 56 },
          { "name": "鈴木", "age": 33 }
        ]
        var rowList = [];
        var row = null;
        var cell = null;
        $.each(jsonData, function(i, data) {
          row = $("<tr/>");
          // テキストの場合
          cell = $("<td/>");
          cell.addClass("nameClass");
          cell.text(data.name);
          row.append(cell);
          // リンクの場合
          cell = $("<td/>");
          cell.addClass("nameClass");
          cell.append($("<a href='" + data.id + "'>" + data.name + "</a>"));
          row.append(cell);
          rowList.push(row);
        });
        $("tbody#result").append(rowList);
        $('nameClass).click(function() {
            alert('クリック!');
        });
      });
    </script>
  </body>
</html>

【OKパターンのソース】

<!DOCTYPE html>
<html>
  <head>
    <title>TableSample</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>名前</th>
          <th>年齢</th>
        </tr>
      </thead>
      <tbody id ="result">
      </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script>
      $(function() {
        var jsonData = [
          { "name": "山田", "age": 21 },
          { "name": "佐藤", "age": 56 },
          { "name": "鈴木", "age": 33 }
        ]
        var rowList = [];
        var row = null;
        var cell = null;
        $.each(jsonData, function(i, data) {
          row = $("<tr/>");
          // テキストの場合
          cell = $("<td/>");
          cell.addClass("nameClass");
          cell.text(data.name);
          row.append(cell);
          // リンクの場合
          cell = $("<td/>");
          cell.addClass("nameClass");
          cell.append($("<a href='" + data.id + "'>" + data.name + "</a>"));
          row.append(cell);
          rowList.push(row);
        });
        $("tbody#result").append(rowList);
        $(document).on('click', '.nameClass', function(){
            alert('クリック!');
        });
      });
    </script>
  </body>
</html>