例如

Question

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

并且对于任何页面都有一个JS文件包含jquery调用

并且对于许多页面打开时，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

如果您不希望脚本在页面上运行，则可以：

请勿将其放在页面上或
将其包裹在一个条件中，检查是否运行它适合当前页面

Answer 2

在启动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 3

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

在js文件中

function InitialFunctionOfPage1()
{//define all prerequisites}

function InitialFunctionOfPage2()
{//define all prerequisites}

并且在每个页面中您都可以在document.ready上进行相关功能，对第1页来说是充足的

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

加载我想要的更多jquery函数

例如

3 个答案: