在元素加载时加载jQuery函数

Question

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

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

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

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

- David

---

发生了什么事？你期望什么？这个实验的结果是什么？请给我们启示。 - hanzo2001

没有警告，但我期望有一个警告。 - David

哇，一分钟内出现了两个绝妙的答案。仔细阅读并理解它们的作用或意义。^^ - hanzo2001

Answer 1

您可以等待文档准备好后，再搜索每个元素。

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

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

然而需要注意的是，如果你只是想将功能绑定到这些div中的元素上（例如绑定.on("click")事件），则可以直接尝试绑定，即使元素不存在也不会报错，只会根据文档大小造成轻微的性能损失。

- Jim Yarbro

---

如果 (X.length) 就足够了。 - Davi Lima

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>

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

- Knelis

---

你是否经常像这样封装你的代码？我以前从未见过，但它似乎非常有用。 - hanzo2001

这是一个很棒的答案。我喜欢 knockout 风格的视图模型声明。 - CodingIntrigue

我发现在使用KnockoutJS时非常有用，但即使没有它也非常有用。它可以保持代码的整洁和有组织性。然而，这非常取决于项目的规模和构建方式。 - Knelis

如果 (X.length) 就足够了。 - Davi Lima

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
    }
});

- CodingIntrigue