$(document).ready() and partial view load

Question

我正在使用Asp.net mvc和jquery开发一个应用程序。我希望在不同的视图中使用相同的命名约定（类和ID）来命名html元素。

如果我想异步加载一个部分视图，那么主视图中的$(document).ready()代码将失去其作用，因为jquery无法识别任何部分视图的html标签和CSS命名。我肯定不想为每个视图编写相同的代码。如何解决这个问题？

- xantrus

---

我添加了一个适用于事件的解决方案，这在大多数情况下都有效。你是否也在运行插件等等？如果是，请再详细说明一下你需要在动态加载的内容上运行什么。 - Nick Craver

Answer 1

你可以使用 .live() 来实现，例如：

$(".myClass").click(function() { });

变成这样：

$(".myClass").live('click', function() { });

.live() 的工作方式有所不同。 .click() 绑定到选择器匹配的元素 在它运行时，通常是 document.ready。 .live() 在 DOM 根处生存，监听事件冒泡并执行处理程序，如果冒泡目标的事件与选择器匹配。

- Nick Craver

---

它适用于点击！那么不同部分视图中使用的插件呢？例如，无论它们来自哪个视图，dataTable() jQuery插件都必须适用于所有具有class="grid"的元素。 - xantrus

如果我理解你的问题正确，那就没问题了。你可以在文档准备好后使用 $(".grid").live([eventname], function() {})... 来将其“绑定”到你使用的任何局部视图中的任何事件上。 - Rody

@user252160 - 你是如何加载这些$.ajax的？ - Nick Craver

问题是我希望每当主页面或部分视图被加载时，我的表格都能够“网格化”。 - xantrus

如果使用live对gridify插件无效，您可以在partial中包含对gridify的调用。但是您必须保留click事件的“live”。除此之外：live在1.4版本中增强了对更多事件的监听，并具有新的上下文选项。http://api.jquery.com/live/ - Mathias F

感谢您提供如此出色的示例和解释！ - dex3703

Answer 2

我个人使用自己封装的$.post来加载所有内容，并根据需要初始化内容。这也有助于统一处理错误、等待通知等。

第三方库通常也提供了预处理ajax加载内容的方法。

部分视图不会调用document.ready，但它们会评估head中script标签内的脚本，因此您可以强制调用部分视图特定的脚本。

我使用的另一种方法是在表单上使用自定义html标记。例如：

<form custom-setup="MyCustomSetupFunc">

我的$.post处理程序将检查此标记并调用此函数，传递表单实例。当部分被加载时，这有助于缩小脚本范围（在同一页上加载多个部分时非常有用）。

- queen3