Ajaxでソートしたらイベントの再登録が必要だった

タイトルの件、昨日一日ハマった｡ﾟ(ﾟ´Д｀ﾟ)゜｡ｳｧｧｧﾝ

社長＆営業＆HTMLコーダーに最近は、プログラマーまで加わりそうな勢いの今日この頃です。
ああ、サーバ構築もやってるな。まさに器用貧乏を体現してますなぁ。

受託開発だと懇意にしているプログラマーさんにお願いすることが多いのですが、
「モクゥ」に関しては基本自社開発なので、私自らコードを書いています。

で、現在、携帯サイト作成ASPサービス「モクゥ」の新機能開発を進めているのですが、昨日、管理画面で導入したAjaxにハマりました。

いつもググって色々な方々に助けて貰っているので、まぁ、少しでも誰かの助けになればと書き残しておきます。


管理画面で登録ユーザー情報を検索条件で絞るというごくありふれた機能をAjaxで実装。
で、リスト内のユーザー情報をクリックするとダイアログが立ち上がり編集できるというものです。

読み込み初期の状態では、問題なく編集アイコンをクリックするとダイアログが立ち上がるのですが、絞り込み検索を行うとウンともスンとも言わなくなる。

完全にイベントを認識しなくなります。

ユーザリストの絞り込みは、以下のようにjQueryを使って、キーワードを渡してプログラム側で絞り込んだHTMLを返してもらった内容に書き換えるといういたって簡単な内容。

    function getResults() {
        key = $("#Key").val();
        $.ajax({
            url: "プログラム実行パス",
            type: 'POST',
            data: {'key' : key},
            success: function(data){
                $('#list').html(data);

            }
        });
    });

　　※上記のような内容を別のイベントから呼び出す。

なぜ、イベントを認識しなくなるの？？？
ググってもうまい具合に情報は見つからず、昨晩、このDiscussionを見てハタを気がつく。

同じイベント処理でも、読み込み直したら再登録しないといけないのではないのかと。

で、以下のように修正

$(document).ready(function() {

    setClickEvent();  //Clickイベントの初期登録

    function getResults() {
        key = $("#Key").val();
        $.ajax({
            url: "プログラム実行パス",
            type: 'POST',
            data: {'key' : key},
            success: function(data){
                $('#list').html(data);
                setClickEvent();  //Clickイベントの再登録

            }
        });
    });

    function setClickEvent() {
        $(".edit").click(function() {
            ダイアログ表示などの処理
        });
    };

});

これで、無事に動くようになりました(*￣∇￣*)ｴﾍﾍ

イベント登録は、終わってるのにーーーという思い込みから生まれた間違いでした。

今日の教訓「Ajaxで書き直したら使うイベントは再登録」