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
});

变量未正确设置

1 个答案: