Question

我有以下简单的代码：

var tabs = null;
function addTab(id, title, data) {
    alert("Begin: " + data.name);
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function (event, ui) {
                alert("Event: " + data.name);
            }
        });
    }
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

我打电话的时候： addTab（“＃tab-1”，“Tab-1”，{ 名称：“示例1” }）; 显示两个警报（“开始：示例-1”和“事件：示例-1”）

但如果我再打电话： addTab（“＃tab-2”，“Tab-2”，{ 名称：“示例-2” }）; 显示两个警报，但第一个显示正确的消息，第二个显示第一个呼叫的消息（“开始：示例-2”，但“事件：示例-1”）

我做错了什么？它是一个标签实现错误吗？

提前致谢

Answer 1

您要在＃center-tabs上设置两次标签容器，每次调用addTab一次。尝试更改您的代码：

var tabs = $("#center-tabs");
function addTab(id, title, data) {
    alert("Begin: " + data.name);
    if (!tabs.hasClass('ui-tabs')) {
        tabs.tabs({
            tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function (event, ui) {
                alert("Event: " + data.name);
            }
        });
    }
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

Answer 2

不，这不是一个错误。

第一次调用addTab()变量tabs为null时，执行if语句的主体。如果您使用正文定义add方法，请使用data.name（Example 1）。这是预期的。

问题在于，在第一次运行期间，会创建一个包含data变量且值为Example 1的闭包。当您addTab()第二次致电tabs时，add方法data.name仍然指的是旧 data.name在第一次运行中保存了。您的alert()无法看到data的新值。

请参阅http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/。

您可以通过而不是直接访问addTabs内的add变量/参数来解决这个问题，因为这会将它们“保存”到闭包中，但是使用其他机制，例如jQuery的.data()

var tabs = null;
function addTab(id, title, data) {
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "...",
            add: function (event, ui) {
              console.log("Event: " + $(this).data('name'));
            }
        });
    }
    tabs.data('name', data.name);
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

HERE 就是一个例子。

jQuery UI选项卡添加保持相同值的事件？

2 个答案: