JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(jQuery/JavaScript 編) > jQuery　clickイベントが効かない 
<!DOCTYPE html>

<html>
<head>
<title>Spring-MVCの散歩道　応用の森(jQuery/JavaScript編)</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/popmenu.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.1.3.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="./js/header.js"></script>
<script type="text/javascript">
<!--
$(function(){

    //静的リンクセレクタクリック時の処理
    $("#id_static").click(function () {
        alert("静的リンクセレクタがクリックされたよ。");
    });

    //click()イベント　動的リンクセレクタクリック時の処理
    $("#id_active").click(function () {
        alert("動的に追加されたclick()イベントのリンクセレクタがクリックされたけど反応しないよ！");
    });

    //on()イベント　動的リンクセレクタクリック時の処理
    $(document).on('click', '#id_onactive', function (e) {
        alert("動的に追加されたon()イベントのリンクセレクタがクリックされたよ。");
    });

    //セレクタ追加ボタンクリック
    $("#id_append").click(function () {
        var html="<a href='javascript:void(0)' id='id_active'>これは後から動的に追加されたclick()イベントリンクです。クリックしてみてください。</a><br/><br/>";
        $(".cl_selector").append(html);
    });

    //セレクタ追加ボタンクリック
    $("#id_onappend").click(function () {
        var html="<a href='javascript:void(0)' id='id_onactive'>これは後から動的に追加されたon()イベントリンクです。クリックしてみてください。</a><br/><br/>";
        $(".cl_selector").append(html);
    });

});
//-->
</script>
</head>

<body class="in_background">
<table class="round">
    <tr>
        <td class="top left bold cf_title2">
            ■応用の森　jQuery　clickイベントが効かない<br />
        </td>
    </tr>
    <tr>
        <td class="top">
            jQueryのclick()イベントを使っていると、場合によってはclickイベントがハンドリングできない場合があります。<br/>
            HTMLとして最初から書かれている（静的な）セレクタにイベントを設定する場合は、<br/>
            click()イベントでなんら問題はありませんが、<br/>
            jQueryのappendメソッドなどで、後から動的に追加された要素のセレクタにclick()イベントを設定しても<br/>
            イベントがハンドリングできません（クリックしても反応しません）。<br/>
        </td>
    </tr>
    <tr>
        <td class="top">
            <div class="cl_selector">
                <a href="javascript:void(0)" id="id_static">これは静的に記述されたリンクです。クリックしてみてください。</a>
                <br/><br/>
            </div>
            上のリンクをクリックすると、jQueryの $("#id_static").click()　イベントが実行され、<br/>
            アラートが表示されます。<br/>
            <br/>
            <button id="id_append">（１）動的セレクタを追加し click()イベントをハンドリングします</button><br/>
            <br/>
            上のボタンをクリックすると、動的にリンクセレクタが追加されます。<br/>
            セレクタクリック時のclick()イベントハンドラを定義していますが、クリックしてもイベントが反応しません。<br/>
            <br/>
            <button id="id_onappend">（２）動的セレクタを追加し on()イベントをハンドリングします</button><br/>
            <br/>
            上のボタンをクリックすると、（１）と同様に、動的にリンクセレクタが追加されます。<br/>
            こちらはセレクタクリック時のイベントを on()イベントハンドラで停止しているので、<br/>
            リンクをクリックするとアラートが表示されます。<br/>
        </td>
    </tr>
    <tr>
        <td class="top">
            整理すると、<br/>
            　$(function(){<br/>
            　　$("セレクタ名").click(function () {<br/>
            　　　　:<br/>
            　　});<br/>
            　});<br/>
            のように定義されたjQueryのclick()イベントメソッドは、<br/>
            appendメソッド等で、後から動的に追加された要素に対してはイベントハンドリングができない。<br/>
            <br/>
            動的に追加される要素がある場合は、click()イベントではなく、<br/>
            　$(function(){<br/>
            　　$(document).on('click', 'セレクタ名', function () {<br/>
            　　　　　:<br/>
            　　　});<br/>
            　});<br/>
            のように、on()イベントで登録しましょう。<br/>
            </td>
    </tr>
</table>
</body>
</html>