jquery html要素を追加した後のhtmlにおけるclickの失効問題

jqeury html要素を追加すると.click失効問題

    function xxx() {
        var abc = '<li><h3 class="geegee">3</h3></li>';
        var acc = '<li><h3 class="geegee">4</h3></li>';
        output = $(abc + acc);
        $('#category').append(output);
    }



    $(document).ready(function() {
        $(".geegee").click(function() { //bug
            alert("a");
        });
    });

jQueryバージョン1.7以降、on()メソッドはbind()、live()およびdelegate()メソッドの新しい代替品である.この方法はAPIに多くの便利さをもたらし,jQueryコードライブラリを簡略化する方法を推奨する.on()メソッドを使用して追加されたイベントハンドラは、スクリプトによって作成された新しい要素など、現在および将来の要素に適用されます.

$(".geegee").on("click",function() {
    alert("a");
});

委任イベント

$("#category").delegate(".geegee","click",function(evt) {
    alert("a");
    evt.stopPropagation();
});

方法2:ノードを追加してからもう一度イベントメソッドを呼び出す

function menuItem() {
    $('.rightmenu').contextmenu({
        target: '.context-menu',
        onItem: function (context, e) {
            //      
            var id = context.context.id;
            if ($(e.target).context.href.indexOf("/id/") == -1) {
                url = $(e.target).context.href;
            }
            $(e.target).attr("href", url + "/id/" + id);
            if ($(e.target).data('operate') == 'copy') {
                //todo     
                $.get($(e.target).attr("href"), function (json) {
                    //todo       
                    $(json.html).insertAfter("#talk_"+id);
                    menuItem();
                });
                return;
            }
        }
    });
}
menuItem();