Как исправить эту ошибку jQuery Scope?

#javascript #jquery

#javascript #jquery

Вопрос:

Что-то, что я не могу понять в этом коде, я думаю, это проблема с областью видимости.

У меня есть следующий фрагмент javascript

 <javascript language="javascript>
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });

        function getMessage(direction, msgId) {
            return "This is an "   direction   " message with ID: "   msgId;
        }

        function showMessage(direction, msgId) {
            $("#dialog").text(getMessage(direction, msgId));
            $("#dialog").dialog('open');
        }
    });
</script>
  

Что я хочу назвать это следующим образом

 <div id="dialog" title="Message Info"></div>
<input type="button" id="btnCommand1" value="Command 1" onclick="javascript: showMessage('Outgoing', 1000487874')" />
<input type="button" id="btnCommand2" value="Command 2" onclick="javascript: showMessage('Incoming', 2000237851')" />
  

Я понимаю, что я также могу привязать событие click через jQuery, но
поскольку я создаю эти кнопки динамически, мне нужно вызвать это, как указано выше.
Проблема, я получаю сообщение об ошибке, что ShowMessage() не определен. Я обнаружил, что, как правило, методы, определенные в области jQuery $ (function(){}), недоступны из-за пределов этой области! как это решить?

Комментарии:

1. вы можете привязать событие click, даже если вы создаете кнопки динамически. используйте jquery. функция live или delegates работает, и все в порядке.

Ответ №1:

javascript:

Это метка, которая не означает «Это код JavaScript». Вы указываете, что атрибуты onclick содержат JavaScript с метаданными.

поскольку я создаю эти кнопки динамически, мне нужно вызвать это, как указано выше.

Это ложная предпосылка.

Я обнаружил, что в общем случае методы, определенные в области jQuery $ (function(){}), недоступны из-за пределов этой области! как это решить?

Переместите функции за пределы этой анонимной функции

Комментарии:

1. Динамическое создание кнопок означает, что я создаю их через ASP.NET код. Приведенный выше фрагмент javascript определен один раз (скажем, в заголовке), и мне нужно использовать его столько раз, сколько требуется ASP.NET сгенерированные кнопки. Так что это не ложная предпосылка. Названия кнопок событий неизвестны, пока они не будут сгенерированы ASP.NET .

2. @Вахид, тебе не обязательно знать названия кнопок. Пока у вас есть класс или любой другой атрибут, вы можете привязать к нему метод. Не имеет значения, было ли это создано позже

3. @JohnP Это хорошая идея, спасибо. Я буду использовать один класс для всех из них и попробую использовать .live (), упомянутый Джеймсом У.

Ответ №2:

Вам не нужно помещать все в $() готовый обработчик. На самом деле это просто для того, чтобы узнать, что страница готова.

Однако поздняя привязка хороша, так что давайте заставим ее работать. Как бы мы это решили?

Привязка в $() функции jQuery с помощью live() :

 $(function(){
    ....
    function showMessage(direction, msgId) {
        $("#dialog").text(getMessage(direction, msgId));
        $("#dialog").dialog('open');
    }

    $("#button1").live("click", function(){
        showMessage('Outgoing', 1000487874);
    });
});
  

Если параметры являются динамическими, вы можете включить их в качестве атрибутов данных:

 <input type="button" id="btnCommand1" value="Command 1" data-param1="Outgoing" data-param2="1000487874" />
  

И получить к ним доступ следующим образом:

     $("#button1").live("click", function(){
        showMessage($(this).attr("data-param1"), $(this).attr("data-param2"));
    });
  

Я также заметил небольшую ошибку в вашем атрибуте HTML onlick с одной дополнительной кавычкой в конце числа:

 onclick="javascript: showMessage('Outgoing', 1000487874')"
//should be:
onclick="javascript: showMessage('Outgoing', 1000487874)"
//or:
onclick="javascript: showMessage('Outgoing', '1000487874')"
  

Ответ №3:

Поскольку вы вызываете из глобальной области, метод JS также должен находиться в той же области.

У вас есть два варианта.

  1. Вы можете использовать привязку jquery с помощью .live , поэтому не имеет значения, создается она динамически или нет.

  2. Вы можете переместить методы из $(function(){}) в глобальную область.

Комментарии:

1. Актуальные методы содержат вызовы Ajax, которые требуют оставаться в пределах области видимости $ (function (){}). В то же время названия кнопок неизвестны, пока они не будут сгенерированы позже с помощью ASP.NET И что? 🙂

2. Почему вызовы AJAX должны оставаться внутри $(function){} . Этот вызов является просто синонимом document.ready , который сам по себе используется, чтобы убедиться, что вы не запускаете свой JS-код слишком рано. Поскольку мы говорим об объявлениях методов, этот момент становится спорным. Кроме того, вам не нужно знать названия кнопок. Просто дайте им класс, и пусть JS сделает всю работу

3. Спасибо, Джон, кажется, я что-то не так понял с $ (function){}. Я проверю дополнительные ресурсы и сообщу всем, что решило эту проблему.