Question

我需要一个禁用缓存的“加载”功能。为此，我写道：

FileName：RootFoolder/script.js

jQuery.fn.extend({
    loadWithoutCache: function() {
        var element = $(this);

        if (arguments[0] != undefined) {
            $.ajax({url: arguments[0], cache: false, dataType: "html", success: function(data, textStatus, XMLHttpRequest) {
                element.html(data);
            }});
        }
        else {
            console.log("Invalid Arguments");
        }
    }
});

当我使用它时，上面的工作正常。但是，如果我第二次使用它，我的loadWithoutCache未定义。

我正在使用它如下：

文件名：RootFolder/index.html

<html>
<head>
    <title>Page Loader</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <p>
        Some Text Description<br /><br />

        <b>Choose a page:</b><br />
        <select id="section">
            <option value="1">Page 1</option>
            <option value="2">Page 2</option>
        </select>

        <div id="content">
        </div>


        <script type="text/javascript">
            $('#section').on('change', function() {
                var pages = ["page1.html",
                             "page2.html"];

                var index = $(this).val() - 1;
                $("#content").loadWithoutCache(pages[index]);
            });
        </script>
    </p>
</body>
</html>

FileName：RootFolder/page1.html

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <br />
    <h3>Page 1</h3>
    <b> - Description</b><br /><br />
    <p>
        Some Paragraph
    </p>
</body>
</html>

FileName：RootFolder/page2.html

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <br />
    <h3>Page 2</h3>
    <b> - Description</b><br /><br />
    <p>
        Some Paragraph
    </p>
</body>
</html>

在index页面上，如果我从下拉列表中选择Page 2，则可以使用。然后我从同一个下拉列表中选择Page 1，它给我未定义。

如果我将loadWithoutCache作为一个函数，然后在$.fn.loadWithoutCache = loadFunc;之后立即执行var index = $(this).val() - 1;，那么每次都会有效：S

我只是写这个来测试如何动态地在另一个页面内加载HTML页面。

为什么不定义？我错过了什么？

Answer 1

当您切换页面时，再次加载jQuery，这将使extend无效。你不应该再次加载jQuery。虽然你也加载了 script.js ，但这些脚本的加载和执行方式与普通导航加载的页面完全不同：它由jQuery处理，因为标准Ajax不加载/执行嵌入式脚本。我假设在过程中重新加载jQuery ，事情变得尴尬，并且 script.js 不会再次执行。

所以：忽略您网页上的head代码 page1.html ， page2.html ，....他们没有必要，因为你有已加载脚本。

或者像Aliester评论的那样，通过仅加载body部分（因此不包括head标记），您可以达到相同的效果。

jQuery.fn.extend函数变得未定义

1 个答案: