asp.net 2.0 站点和 <script/> 的位置导致问题/冲突的标签

asp.net 2.0 站点和

我不知道如何准确/明智地描述这一点，因为这似乎完全不可能，但肯定有一些原因。

我正在尝试利用 jquery、jquery-ui、qtip（jquery 的工具提示）和 highcharts（javascript 图表），但出于发布目的，我可以轻松地仅使用 jQuery 和 jQuery-UI。

如果我在元素底部包含

  <head>
    <script jquery.js/>
    <script jquery-ui.js/>
  </head>
  <body>
     ... html ...
     <script type="text/javascript">
       $(document).ready(function () {
           $(".slider").slider( { .. options .. } );
       } )
     </script>
     ... more html *including* the .slider elements
  </body>

但是，如果我将两个 jQuery 脚本标记移动到 结束元素的正上方，那么事情就会起作用。当脚本标记位于 head 元素中并且我调试应用程序时，基本上页面似乎已完全加载，并且 Visual Studio 突出显示调用 .slider() 函数的行，表示它不知道slider() 是什么。查看调用堆栈，它似乎从文档就绪函数中正确调用了它......所有标记似乎也在那里，让我相信文档确实已经准备好。

现在，我没有在伪代码中包含 asp.net 1.1/2.0 站点所需的内容，即带有 runat="server' 的

元素以及使用标签（我们需要它来利用 Microsoft Ajax 解析来自不同文化的货币值）。我不敢相信它们会导致问题，但也许它们确实如此。 , asp.net 注入了几个自己的脚本部分（即用于验证、回发等）。

关于表单标记...所有 html 和 document.ready 标记都将位于表单标记内，而脚本标签总是在表单标签之外（无论是在表单标签之上、在头部还是在正文底部）。

显然我可以将脚本标签留在底部，并且我。很可能最终会这样做，但我正在努力做到一个干净的“模板站点”，在创建新的客户端站点时使用它，但我有一个限制迫使我将这些标签放在 html 的底部，这感觉不对。我确信我们的框架代码（或者可能是 asp.net 的）只是插入了一些导致 jQuery 出现问题/冲突的内容，但我真的不知道如何调试/诊断该问题是什么。因此，如果有人有任何建议，我将不胜感激。

原文

I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.

I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.

If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):

  <head>
    <script jquery.js/>
    <script jquery-ui.js/>
  </head>
  <body>
     ... html ...
     <script type="text/javascript">
       $(document).ready(function () {
           $(".slider").slider( { .. options .. } );
       } )
     </script>
     ... more html *including* the .slider elements
  </body>

However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.

Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)

Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).

Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.

分享到QQ

分享到微博