Создание элемента 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> 

В дополнение к этому, есть много других DIVs той же структуры, но с различными идентификационными номерами, например:

<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> 

Теперь, у меня есть функция JQuery, которая принимает идентификатор .message_top DIV и он должен выполнить действие, используя содержимое .top_status DIV, который принадлежит к нему. Однако по какой-то причине в синтаксисе он, похоже, не распознает идентификатор div .top_status. Я знаю, что я Nto объяснить это очень хорошо, но вот скрипка, которая поможет вашему понять (код и комментарии есть):

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_7").html();, он отлично работает, но если я назову его $("#"+status_id).html(); (статус status_id «status_7»), он не работает. Что тут происходит? Я использовал подобный код несколько раз и никогда не имел никаких проблем.

Answer 1

Используйте местные переменные вместо глобальных. window.status предопределен и доступен только для чтения.

Я просто ответил на этот сегодня: Does Javascript/jQuery have system vars?

Updated jsFiddle.