Jquery UI选项卡：显示添加前触发的事件答案

【问题标题】：Jquery UI Tabs: show events fired before add oneJquery UI选项卡：显示添加前触发的事件
【发布时间】：2011-11-10 18:18:52
【问题描述】：

我正在使用 Jquery Ui 示例来操作选项卡，如本页 http://jqueryui.com/demos/tabs/#manipulation 中所示。如果当我创建第一个选项卡并在 add 事件中创建一个 var 然后在 show 事件中写入 alert(var_created) 时没有创建选项卡，则它无法告诉 var 未定义，第二个选项卡，以此类推选项卡没有问题。

我在 jsfiddle 创建了一个脚本来展示它：

现在它应该打印一个警报，但它不起作用，如果您尝试使用 jslint 可以看到错误，告诉您未定义 var http://jsfiddle.net/paglia_s/5GU8M/1/

有办法避免吗？

【问题讨论】：

标签： jquery jquery-ui events tabs

【解决方案1】：

删除变量

var var1 = "尝试";应该是 var1 = "try";

我在您的链接http://jsfiddle.net/5GU8M/4/上更正了它

为了清楚起见，这里是解释：

如果您使用 'var myvar = 1'，该变量将仅在使用它的函数内部有效。

如果您只声明 'myvar = 1'，则该变量是全局变量，并且将在您的 jquery 函数之外工作，您将能够从脚本中的任何位置调用它。

【讨论】：

好的，但问题是另一个问题，所以当创建第一个选项卡时它不起作用，因为您可以从链接中看到
显然是您或其他人编辑了它。 jsfiddle.net/6fH4v这是一个叉子，试试叉子，你会看到警报。
您确定链接吗？它像以前一样工作，唯一的区别是现在缺少 var1 之前的 var

【解决方案2】：

我不知道 jsFiddle。我的更改会自动保存吗？

您必须在上层范围内定义变量。否则这个 var 没有在外面定义。

我做了以下事情：

var var1 = "";

$(function() {
var $tab_title_input = $("#tab_title"),
    $tab_content_input = $("#tab_content");
var tab_counter = 0;

// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function(event, ui) {
        var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
        $(ui.panel).append("<p>" + tab_content + "</p>");
        var1 = "try";

    },

    show: function(event, ui) {

        alert(var1);

    }
});

【讨论】：

在jsFiddle中，顶部有一个保存按钮。如果你按下它，你最终会看到一个新的 url，你可以在这里分享它，其中包含你按下保存按钮时的代码。

【解决方案3】：

实际上有几个问题需要了解：变量作用域和执行顺序。

变量作用域：用var 声明的变量是局部作用域（到最近的函数）。没有var 声明的变量是全局作用域。

执行顺序：当一个选项卡被添加到一个没有任何现有选项卡的 jQuery Tabs 控件时，tabsshow 事件在tabsadd 事件之前执行。因此，var1 在添加第一个选项卡时不会被定义，因此变量未定义错误。

您可以在使用之前检查var1是否已定义：

if (typeof(var1) !== 'undefined') alert(var1);

或者，重新排列您的代码。

查看示例：http://jsfiddle.net/william/6fH4v/1/。

【讨论】：