我的 jQuery 加载脚本的延迟答案

【问题标题】：A delay with jQuery load script of mine我的 jQuery 加载脚本的延迟
【发布时间】：2012-02-12 15:15:26
【问题描述】：

我的代码加载文件有延迟。我必须点击<a href="#string" id="hash"></a> 两次使其显示 .txt 文件。

代码：

<script type='text/javascript'>
  $(document).ready(function(){
    $("a#hash").click(function(){
      var loc = $(window)[0].location;
      var getUrlString = $(loc).prop('hash').substr(1);
      $("p").load(getUrlString + '.txt');
    });
  });
</script>

<body>
  <p>This is a placeholder for your content</p>
  <a id="hash" href="#login">Login</button><br />
  <a id="hash" href="#register">Register</button><br />
  <a id="hash" href="#recovery">Recovery</button> 
</body>

例如，如果我在第一次加载页面时单击登录 - 它不会显示任何内容。如果我在单击登录后单击注册-它将显示登录。如果我在点击注册后点击恢复 - 它会显示注册，但如果我再次点击恢复，它最终会显示恢复。

对不起，我的英语不好，或者很难理解我的问题。我还在学习 jQuery，如果我自己尝试/失败，我会发现学习起来更容易，然后找出问题所在。光看教程就不一样了:)

谢谢。

【问题讨论】：

首先改变'id'。不能调用同一个ID。使用类！
你不要那样使用id；它们必须是唯一的，即对于整个文档中的 any 元素，相同id 的实例不超过一个。所以<a id="hash"应该改成<a class="loader"和$('a#hash')改成$('a.loader')。

标签： jquery html get delay

【解决方案1】：

首先，ID 不应在您的页面中重复。如果您需要按标识符对元素进行分组，请使用类。

其次，您现在使用的方法的问题是它会在更改以反映单击的 a 中的新 URL 之前读取窗口的 URL。这就是为什么您会在出现之前从点击中看到内容。如果需要获取 URL 的 hash 值，从被点击链接的href 属性中获取就简单多了。

考虑到这一点，试试这个：

<script type='text/javascript'>
    $(document).ready(function(){
        $("a.hash").click(function() {
            var textfileName = $(this).attr("href").replace("#", "");
            $("p").load(textfileName + '.txt');
        });
    });
</script>

<body>
    <p>This is a placeholder for your content</p>
    <a class="hash" href="#login">Login</button><br />
    <a class="hash" href="#register">Register</button><br />
    <a class="hash" href="#recovery">Recovery</button> 
</body>

Example fiddle

【讨论】：

它们将仅包括用于登录、注册、帐户恢复等的表单。仅限表格。也谢谢你提供的信息，我以前不知道:)
嗯，用这个脚本，它不会加载txt文件！

【解决方案2】：

HTML 元素必须有唯一的 ID。您应该为此使用类和类选择器而不是 ID。你也没有关闭你的锚标签（你已经关闭了一个不存在的button）。最后，您需要阻止单击处理程序中的默认操作，以防止实际使用链接。如果没有其他需要触发的处理程序，您可以简单地返回 false。否则，您需要使用传递给回调函数的事件对象e，并使用e.preventDefault();。

<script type='text/javascript'>
  $(document).ready(function(){
    $("a.hash").click(function(e){
      var loc = $(window)[0].location;
      var getUrlString = $(loc).prop('hash').substr(1);
      $("p").load(getUrlString + '.txt');
      // you probably want an .htm file, though it will likely work
      // with HTML in a .txt file; browsers are forgiving
      return false;
    });
  });
</script>

<body>
  <p>This is a placeholder for your content</p>
  <a class="hash" href="#login">Login</a><br />
  <a class="hash" href="#register">Register</a><br />
  <a class="hash" href="#recovery">Recovery</a> 
</body>

我也不知道您为什么要尝试将 text 文件加载到段落中。通常，您希望加载 HTML 文件或执行某些脚本的结果。

【讨论】：

这是为我测试脚本而制作的，一个段落是我想到的最简单的事情。 :) 但是谢谢！
@Kristjan - Web 服务器并不总是提供所有类型的文件（MIME 类型）。我怀疑您是在本地使用文件系统执行此操作，但您要小心养成良好的习惯。 HTML 文件应使用.htm 或.html 扩展名提供，即使其中没有标记。否则，您可能需要仔细检查您的 Web 服务器设置以查看是否允许使用 .txt 文件。