DRYな備忘録

Don't Repeat Yourself.

jQueryのonメソッドは描画されていないと有効じゃないのか？

検証コード

<html>
    <head>
        <meta charset="utf8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var log = function(){
                    console.log(this.innerHTML);
                };
                // 描画してからイベントバインド
                var $target1 = $('<a></a>').html("Target1");
                $("#container1").append($target1);
                $target1.on('click', log);

                // 描画する前（メモリ上にjQueryオブジェクトがある状態）で
                // イベントバインドしたのちに描画
                var $target2 = $('<a></a>').html("Target2");
                $target2.on('click', log);
                $("#container2").append($target2);

                // 描画する前に...
                var $target3 = $('<a></a>').html("Target3").attr({id:"test3"});
                // セレクタで探してイベントバインドしてみる
                $("a#test3").on('click', log);
                $("#container3").append($target3);

                // 描画してからセレクタで探す（当然いける）
                var $target4 = $('<a></a>').html("Target4").attr({id:"test4"});
                $("#container4").append($target4);
                $("a#test4").on('click', log);
            });
        </script>
    </head>
    <body>
        <div id="container1"></div>
        <div id="container2"></div>
        <div id="container3"></div>
        <div id="container4"></div>
    </body>
</html>

結果

f:id:otiai10:20131111120906p:plain

だいたい予想通り

ちなみに

$('a')という表記は「aセレクタで要素を探してjQueryオブジェクト化して返す」で、$('<a></a>')は「a要素を作ってjQueryオブジェクト化して返す」ということも今回初めて知った

で、

// こういうことは出来るのかと気になっちゃうよね
var $target5 = $('<div><a id="unko">うんこ</a></div>');
$target5.find('a#unko').on('click', log);
$("#container1").append($target5);

いけた

f:id:otiai10:20131111121920p:plain

(　ﾟ∀ﾟ)o彡° うんこ！