加载更多我想要的 jquery 函数

Question

我正在使用 MVC，我的网站设计是有页眉、正文和页脚， 我网站中的每个页面都有相同的页眉和页脚，但正文不同

对于每一个页面都有一个包含 jquery 调用的 JS 文件

对于许多页面，当它打开时，jquery 调用工作并使用 ajax 从数据库中获取数据并将该数据放入该页面中

我的问题是：感觉 jquery 调用以 $(document).ready 开头，所以当我打开任何页面时，所有 jquery 调用都会开始，我不想要那个，但我只想要那个打开的页面的 jquery正在加载

示例

这个 jquery 只是一个页面

$(document).ready(function(){
    $.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
        var select = $("#countrySelector");
        var options = '';
        for(var i=0;i<data.length;i++){
            options += "<option>"+data[i]+"</option>";
        }
        select.html("<option>Select Source</option>"+options);
    });
});

这个 jquery 用于另一个页面，但它是在我加载第一页时加载的

$(document).ready(function(){
        $.getJSON("http://localhost/Mar7ba/Type/getAllTypes/TRUE",function(data){
            var options = '';
            options+="<option>Select Type</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $("#addPlace #apTypeSelect").html(options);
        });
    });

Answer 1

在触发 AJAX 方法之前，测试您正在操作的元素是否存在。例如，在您的第一个示例中：

$(document).ready(function(){
    var select = $("#countrySelector");
    if (select.length) { // must test .length; 'select' always exists even if it's empty
        $.getJSON("http://localhost/Mar7ba/Cell/getAllCountries/TRUE",function(data){
            var options = '';
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            select.html("<option>Select Source</option>"+options);
        });
    }; // end if
});

Answer 2

如果您不希望脚本在页面上运行，那么：

1. 一开始就不要放在页面上或者
2. 将其包装在一个条件中，检查运行它是否适合当前页面

Answer 3

我认为如果你将所有页面的所有启动功能都放在document.ready中，那么功能会变得太冗长并且会影响可读性。您应该为每个页面编写不同的启动函数，并在加载时从页面调用它们，这样您的代码将保持更简单，例如

在js文件中

function InitialFunctionOfPage1()
{//define all prerequisites}

function InitialFunctionOfPage2()
{//define all prerequisites}

在每个页面中，您都可以在 document.ready 上使用相关功能，对于第 1 页来说足够

$(document).ready(function()
{
 InitialFunctionOfPage1();
}