變量沒有正確設置

Question

我正在學習jQuery，並且遇到以下問題。在我的代碼中，我得到了變量prev_content，我想要在新的.dialog()中顯示該變量的顯示內容。變量是全局定義的，那麼內容被設置在.click()功能，但變量返回UNDEFINED

$('body').append('<div class="ui-dialog" id="jp_main_menu"><ul id="jp_templates_list"></ul></div>');         console.debug(jp_console_title + "[OK] #jp_main_menu - creating element"); 
JPTemplateGetList(); 
var prev_content; 
$(".jp_show_preview_window").click(function(){ 
    prev_content = jp_tpl[$(this).attr("id")].source; 
    $('#jp_preview_window').dialog("open"); 
    return false; 
}); 
$('#jp_main_menu').dialog({ 
    autoOpen: false, 
    modal: false, 
    resizable: true, 
    draggable: true, 
    position: ['center',100], 
    title: "MY WINDOW", 
    width: 600 
});                                  console.debug(jp_console_title + "[OK] #jp_main_menu - setting jQuery .dialog function"); 
$('body').append('<div class="ui-dialog" id="jp_preview_window">'+ prev_content +'</div>'); 

正如你所看到的，變量的內容設置上線：

prev_content = jp_tpl[$(this).attr("id")].source; 

但是，當我想顯示的內容（我的代碼的最後一行），它會顯示UNDEFINED。

你能幫助我嗎？謝謝

Answer 1

這是一個時機問題。您的最後一行代碼在您觸發點擊處理程序之前運行，因此您的變量仍然爲undefined，因爲它的代碼尚未調用（直到發生鼠標點擊纔會調用它）。

移動最後一行是點擊處理程序中：

$('body').append('<div class="ui-dialog" id="jp_main_menu"><ul id="jp_templates_list"></ul></div>');         console.debug(jp_console_title + "[OK] #jp_main_menu - creating element"); 
JPTemplateGetList(); 
$(".jp_show_preview_window").click(function(){ 
    var prev_content = jp_tpl[$(this).attr("id")].source; 
    $('body').append('<div class="ui-dialog" id="jp_preview_window">'+ prev_content +'</div>'); 
    $('#jp_preview_window').dialog("open"); 
    return false; 
}); 
$('#jp_main_menu').dialog({ 
    autoOpen: false, 
    modal: false, 
    resizable: true, 
    draggable: true, 
    position: ['center',100], 
    title: "MY WINDOW", 
    width: 600 
});