Question

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

在我的页面上有＆lt; a href =“index”＆gt;单击何时触发：

一个pushState事件，它将浏览器的URL栏更改为 mysite.tld / index
一个getJSON调用，它加载一个随机url并将其放入而不是当前＆lt; a href =“index”＆gt;

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

这样的事情：

点击索引
- LOAD INDEX2和REPLACE INDEX
  - 点击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>

load.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']; ?>"
}

Answer 1

那是因为

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

仅适用于此行执行点的DOM中的a元素。稍后用另一个 a元素替换它，这不会被此捕获。

使用.on代替f.e.像这样：

$(document).on("click", "a", function(e) { …

jQuery pushState加载内容，不同的URL

1 个答案: