Вкладки пользовательского интерфейса Jquery: показывать события, запущенные перед добавлением одного

#jquery #jquery-ui #events #tabs

#jquery #jquery-ui #Мероприятия #вкладки

Вопрос:

Я использую пример пользовательского интерфейса Jquery для управления вкладками, как на этой страницеhttp://jqueryui.com/demos/tabs/#manipulation . Если при создании первой вкладки и создании переменной в событии добавления, а затем записи alert (var_created) в событии show не создается вкладка, сообщающая, что переменная не определена, со второй, ther и так далее вкладками проблем нет.

Я создал скрипт в jsfiddle для его отображения:

теперь он должен напечатать предупреждение, но это не работает, и если вы попытаетесь, вы можете увидеть ошибку с jslint, которая сообщает, что var не определенhttp://jsfiddle.net/paglia_s/5GU8M/1 /

Есть способ избежать этого?

Ответ №1:

удалить var

var var1 = «try»; должно быть var1 = «try»;

Я исправил это по вашей ссылке http://jsfiddle.net/5GU8M/4 /

Для наглядности, вот объяснение :

если вы используете ‘var myvar = 1’, переменная будет активна только ВНУТРИ функции, в которой она используется.

если вы объявите только ‘myvar = 1’, переменная будет глобальной и будет работать вне вашей функции jquery, и вы сможете вызвать ее из любого места скрипта.

1. хорошо, но проблема в другом, поэтому при создании первой вкладки она не работает, как вы можете видеть по вашей ссылке

2. Очевидно, вы или кто-то отредактировал его обратно. jsfiddle.net/6fH4v вот форк, попробуйте использовать форк, вы увидите предупреждение.

3. вы уверены в ссылке? это работает как и раньше, единственное отличие заключается в том, что теперь var для var1 отсутствует

Ответ №2:

Я не знаю jsFiddle. Сохраняются ли мои изменения автоматически?

Вы должны определить переменную в верхней области видимости. В противном случае этот параметр не определен снаружи.

Я сделал следующее:

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

    }
});

1. В jsFiddle вверху есть кнопка сохранить. Если вы нажмете на это, вы попадете на новый URL, которым вы можете поделиться здесь и который содержит код, который у вас был, когда вы нажимали кнопку сохранить.

Ответ №3:

На самом деле есть пара проблем, которые вам нужно понять: область действия переменной и порядок выполнения.

Область действия переменной: переменные, объявленные с помощью var , являются локальной областью действия (для ближайшей функции). Переменные, объявленные без var , являются глобальной областью.

Порядок выполнения: Когда вкладка добавляется к элементу управления jQuery Tabs без какой-либо существующей вкладки, tabsshow событие выполняется перед tabsadd событием. Таким образом, var1 не будет определено при добавлении первой вкладки, отсюда и ошибка переменной undefined.

Вы можете просто проверить, определено ли var1 перед его использованием:

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

Или измените свой код.

Смотрите пример: http://jsfiddle.net/william/6fH4v/1 /.