Question

stackoverflow上有几十个类似的问题，但我找不到有效的答案。我有几个Javascript函数，我在多个页面中反复使用，所以我认为将它们移动到外部文件是个好主意。但是当我这样做时，它们就不起作用了。

以下是我目前拥有的两个函数（现在是单独的）外部文件：

function MessageDialog(obj, title, dialogText) {
  //add the dialog div to the page
  $('body').append(String.Format("<div id='messageDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
  //create the dialog
  $('#messageDialog').dialog({
    modal: true,
    resizable: false,
    draggable: false,
    close: function(event, ui) { $('body').find('#messageDialog').remove(); },
    buttons:
      {
        'OK': function() {
          $(this).dialog('close');
        }
      }
  });
}

//Confirmation dialog
function ConfirmationDialog(obj, title, dialogText, okButtonText, cancelButtonText) {
  var confirmed = false;
  if (!confirmed) {
    //add the dialog div to the page
    $('body').append(String.Format("<div id='confirmationDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
    //create the dialog
    $('#confirmationDialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      close: function(event, ui) { $('body').find('#confirmationDialog').remove(); },
      buttons:
        {
          $okButtonText: function() {
            $(this).dialog('close');
            confirmed = true;
            if (obj) obj.click();
          },
          $cancelButtonText: function() {
            $(this).dialog('close');
          }
        }
      });
    }
    return confirmed;
}

我从ConfirmationDialog()事件（在ASP.NET中）调用OnClientClick：

如果MessageDialog()事件出错，则会从代码隐藏中调用

btnDelIncident_Click：

private void DisplayMessageDialog(string msgTitle, string msgText)
{
  StringBuilder msg = new StringBuilder();
  msg.AppendLine("<script type='text/javascript'>");
  msg.AppendFormat("  MessageDialog(this, '{0}', '{1}');" + System.Environment.NewLine, msgTitle, msgText);
  msg.AppendLine("</script>");
  ClientScript.RegisterStartupScript(this.GetType(), "messageDialog", msg.ToString());
}

我没有从ConfirmationDialog()调用中收到错误（虽然没有出现对话框），但是MessageDialog()调用（来自代码隐藏）会导致“未捕获的ReferenceError：MessageDialog”没有在Javascript控制台中定义。

我在<head>标记中包含了两个外部Javascript文件，它们位于jQuery之后：

<script type="text/javascript" src="/Scripts/ConfirmationDialog.js"></script>
<script type="text/javascript" src="/Scripts/MessageDialog.js"></script>

我也尝试将这两个<script>标记放在页面末尾，但没有区别。我做错了什么？

编辑：我能够通过将函数包装在(function($) { });中来解决对话框问题，正如Neil建议的那样。这是最终的工作函数（在外部.js文件中声明）：

//Confirmation dialog
(function($) {
  var confirmed = false;
  ConfirmationDialog = function(obj, title, dialogText, okButtonText, cancelButtonText) {
    if (!confirmed) {
      //add the dialog div to the page
      $('body').append(String.Format("<div id='confirmationDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
      //create the dialog
      $('#confirmationDialog').dialog({
        modal: true,
        resizable: false,
        draggable: false,
        close: function(event, ui) { $('body').find('#confirmationDialog').remove(); },
        buttons:
        [{
          text: okButtonText,
          click: function() {
              $(this).dialog('close');
              confirmed = true;
              if (obj) obj.click();
           }
         },
         {
           text: cancelButtonText,
           click: function() {
            $(this).dialog('close');
           }
         ]}
      });
    }
    return confirmed;
  };
})(jQuery);

Answer 1

您绝对不希望将脚本标记放在外部JavaScript文件中。脚本标记是HTML元素，.js文件不是HTML。尝试将代码包装在立即调用的函数表达式中：

(function() {

    // your code here    

})();

如果要绑定对DOM节点上事件的函数调用，例如“click”或“hover”，则应确保在执行这些绑定之前DOM已准备就绪。 jQuery有一个名为.ready（）的方法，可用于此：

$(document).ready(function() {
});

Answer 2

这应该有所帮助。您需要等到DOM加载之后再引用MessageDialog客户端方法中的元素

  private void DisplayMessageDialog(string msgTitle, string msgText)
    {
      StringBuilder msg = new StringBuilder();
      msg.AppendLine("<script type='text/javascript'>");
      msg.AppendFormat("jQuery(function($) { MessageDialog(this, '{0}', '{1}'); });" + System.Environment.NewLine, msgTitle, msgText);
      msg.AppendLine("</script>");
      ClientScript.RegisterStartupScript(this.GetType(), "messageDialog", msg.ToString());
    }

将内联Javascript移动到外部文件时出错 - 我该如何解决这个问题？

2 个答案: