0

当我尝试从http://html5.gingerhost.com/重新创建演示时遇到了一些问题。我将尝试尽可能清楚地描述情况：

在我的页面上有 <a href="index"> ，点击它会触发：

  • 将浏览器的 URL 栏更改为mysite.tld/index的 pushState 事件
  • 一个 getJSON 调用，它加载一个随机 url 并把它而不是当前的 <a href="index">

当用户单击加载的随机 url 时，pushState 事件不会触发，浏览器会跟随随机 url ......这不是我想要的。我想继续触发 pushState 事件并继续加载随机 url。

像这样的东西：

  • 点击索引
    • 加载索引 2 和替换索引
      • CLICK INDEX2 （在这里它会中断。它会加载真实页面）
        • LOAD INDEX3 和 REPLACE INDEX2 (这里我要到)

如果我不清楚，我很抱歉。我对自己的 jQuery 技能不是很自信。

你有什么建议吗？

这是源代码：

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('a').click(function(e) {
            href = $(this).attr("href");

            loadContent(href);

            history.pushState('', 'New URL: '+href, href);
            e.preventDefault();
        });
    });

    function loadContent(url){
        $.getJSON("load.php", {pid: url}, function(json) {
            $.each(json, function(key, value){
                $(key).html(value);
            });
        });         
    }   
</script>
</head>

<body>
    <div>
        <a href="index">Go to: index</a>
    </div>
    <p></p>
</body>
</html>

加载.php

<?php $i = rand(0,10); ?>
{
"div":"<a href='<?php echo $_GET['pid'].$i; ?>'>Go to: <?php echo $_GET['pid'].$i; ?></a>",
"p":"This is the page for <?php echo $_GET['pid']; ?>"
}
4

1 回答 1

1

那是因为

$('a').click(function(e) { …

仅适用于a执行此行时 DOM 中的元素。稍后您将其替换为另一个 a元素，该元素不会被此捕获。

改为使用.onfe，如下所示：

$(document).on("click", "a", function(e) { …
于 2013-04-22T10:05:18.230 回答