Question

我的应用程序的每个页面都有一些jQuery代码。我想压缩并将它们放在一个文件中。是否可以仅在某个div加载时加载jQuery？我尝试使用以下jQuery代码在主体（ID = addProject）中添加DIV id：

$("#addProject").ready(function() {
alert("test"); 
});

$("#addProject").pageload(function() {
alert("test"); 
});

 $("#addProject").on('pageload',function() {
alert("test"); 
});

Answer 1

您可以等到文档准备就绪，然后搜索每个元素。

$(function() {
   if ($("#addProject").length > 0) {
      // execute some code for addProject
   }

   if ($("#deleteProject").length > 0) {
      // execute some code for deleteProject
   }
});

但是应该注意的是，如果您只是尝试将动作绑定到这些div中的元素（例如.on("click")个事件），那么即使元素没有，您也可以继续尝试绑定它们。存在。它不会抛出错误或任何东西。它只会导致轻微的性能影响，具体取决于文档的大小。

Answer 2

是的，你可以。您可以在页面完成加载时测试元素是否存在。

$(document).ready(function () {
    // Page 1
    if ($('#page-1').length > 0) {
       // Do specific stuff for page 1
    }

    // Page 2
    if ($('#page-2').length > 0) { }

    // Etc...
});

但是，您可能最好将代码包装在您随后在页面上调用的视图模型中。为什么？好吧，也许你（不小心）在另一个具有相同类或id的页面上创建一个元素，突然你的JavaScript在不应该的页面上执行。或者，如果您（或其他人）更新网站模板并更改元素的类或ID，该怎么办？现在你的代码停止工作......

你可以有一个带有视图模型的JS文件（或许多），如下所示：

var Page1ViewModel = function () {
   // All JS code specific to Page 1
};

var Page2ViewModel = function () {
   // All JS code specific to Page 2
};

在您的页面上，您可以调用相关的视图模型：

<script type="text/javascript">
var viewModel;     

$(document).ready(function () {
    viewModel = new Page1ViewModel();
});
</script>

这些只是许多可能解决方案中的两个。

Answer 3

您需要测试是否存在#addProject：

// Wait for the document to become ready
$(function() {
    // This will return the number of elements which match the selector. If this
    // is true, then the element exists
    if($("#addProject").length) {
        alert("here");
        // Put your addProject only scripts here
    }
});

在元素加载上加载jQuery函数

3 个答案: