Блог

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

У меня есть следующий фрагмент 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(){}), недоступны из-за пределов этой области! как это решить?

javascript:

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

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

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

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

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

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

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

Привязка в $() функции 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')"
  

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

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

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

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