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

我需要禁用缓存的"加载"功能。为此，我写了：

文件名： 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>

文件名： 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>

文件名： 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成为函数，然后在var index = $(this).val() - 1;之后立即进行$.fn.loadWithoutCache = loadFunc;，则每次都可以使用：S

我只是写这篇文章以测试如何动态地在另一页的内部加载HTML页面。

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

切换页面时，再次加载jQuery，这将使您的extend无效。您不应该再次加载jQuery。尽管您还在其中加载 script.js ，但这些脚本的加载和执行方式与普通导航加载的页面上的情况并不完全相同：它是由JQuery处理的，由于标准AJAX不会加载/执行嵌入式脚本。我假设在期间重新加载jQuery ，事情变得尴尬， script.js 不会再次被执行。

so：从您的页面中删除 head标签 page1.html ， page2.html ，........它们不是必需的，因为您已经加载了脚本。

或像Aliester所说的那样，您可以通过仅加载body零件来实现相同的效果（因此不包括head标签）。

相关内容

最新更新

热门标签：