javascript - 「その場で」要素 ID を作成しても jQuery では機能しない

Question

私は次のHTML構造を持っています:

<div class='message_top' id='top_7' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_7'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

これに加えて、同じ構造の他の多くの DIV がありますが、ID 番号は異なります。たとえば、次のようになります。

<div class='message_top' id='top_15' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_15'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

現在、div の ID を取得する jQuery 関数があり、それに属する div.message_topの内容を使用してアクションを実行する必要があります。しかし、何らかの理由で、構文では、 div.top_statusの ID を認識していないようです。.top_status私はこれをうまく説明していないことを知っていますが、ここにあなたの理解に役立つフィドルがあります（コードと解説があります）：

http://jsfiddle.net/gMy2f/1/

$(function () {
    $('.message_top').click(function(){
        var id = this.id;
        status_id = id.replace("top","status");
        status = $("#"+status_id).html();
        alert(status_id+" "+status);    //status variable is empty, but...
        status2 = $("#status_7").html();
        alert(status2);                 //status2 has the expected value
    });
});

ご覧のとおり、それを使用してメソッドを呼び出すと正常に動作しますが、.html()( status_id が "status_7" で) 呼び出すと動作しません。ここで何が起こっているのですか？同様のコードを何度も使用しましたが、問題はありませんでした。$("#status_7").html();$("#"+status_id).html();