Question

我尝试使用jQuery的.load函数将div元素从一个页面加载到另一个页面。但它使整个脚本只运行一次。

我在SO上看过一些类似的问题，但这些问题似乎都不符合我的问题。我尝试过将.click更改为.one以及添加new Date().getTime()和$.ajaxSetup({cache: false})以防止兑现等问题。没有这些工作。

我不确定问题是什么，但它似乎只在我使用.load函数时才会发生。我已在下面添加了script.js文件的简化版本：

的script.js

$(function() {
    $("a").click(function(e) {
        var url = $(this).attr("href");

        $("body").load(url + " .container");
        e.preventDefault();
    });
});

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Index page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>This is the index page</h2>
        <a href="index.html">Index page</a>
        <br>
        <a href="second.html">Second page</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

second.html看起来与index.html文件几乎相同。

Answer 1

我遇到了同样的问题。我在load()之后再次调用Javascript解决了这个问题。这是片段

$.getScript('<your script>');

Answer 2

您的事件处理程序仅绑定到第一页上的锚点，我将使用事件委派，这样每次加载新页面时都不必绑定处理程序。

$(document).on('click', 'a', function(e){
    var url = $(this).attr("href");

    $("body").load(url + " .container");
    e.preventDefault();
});

jQuery .load函数使脚本只执行一次

2 个答案: