在部分视图中定义jQuery ready事件

Question

我在Site.Master页面中定义了一个$(document).ready()事件，同时我也想在我的某个局部视图（用于显示消息和错误消息）中定义另一个$(document).ready()事件，并且我在所有页面和所有局部视图中都调用了此局部视图...

这些局部视图在页面上显示并使用模态弹出窗口...所以我尝试了这个方法，但是局部视图中的ready事件没有触发。

我有几个问题要问：

• 首先，我正在尝试的东西是否可行...
• 有一些页面具有局部视图，因此页面有两个$(document).ready()事件，当页面加载时，这两个事件之间会发生冲突吗...

如果有人能提供一些示例将不胜感激...

- Safran Ali

---

你使用了 ajax 加载这些局部视图吗？ - Amir Ismail

当调用/更新部分视图时，我使用ajax.beginform或ajax.actionlink。 - Safran Ali

Answer 1

是的，您可以在页面上包含多个就绪事件处理程序。您可以将它们放在网站主控中、部分视图和视图页面中 - 多达您需要的数量。必须全部包含在脚本标记中。它们将按照它们在最终呈现页面中包含的顺序触发。请注意，您要小心确保部分内容仅在页面上包含一次或者不要紧如果多次调用该处理程序。

示例（不完整）:

主控:

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jqueryui.js"></script>
 <script type="text/javascript">
      $(function() {
           // do something for whole page
      });
 </script>

 @Html.Partial( "ErrorDialog" )

部分 (错误对话框)

 <div id="errorDialog" style="display: none;" title="Error">
     <p>An error occurred</p>
 </div>
 <script type="text/javascript">
      $(function() {
          $('#errorDialog').dialog({
             modal: true,
             autoOpen: false,
             // more options
          });
      });

      function showError(msg) {
          $('#errorDialog').find('p').html(msg)
                           .stop()
                           .dialog('open');
      }
 </script>

- tvanfosson

---

如果存在多个部分视图，则此方法无法正常工作。按顺序排列的第一个部分视图将触发其文档准备就绪，但第二个部分视图不会被触发。 - Pinakin Shah

@PinakinShah，除非第一个有什么问题（a）失败或（b）阻止其他运行，否则这不应该是真的。您可以根据需要添加任意数量。即使通过AJAX加载它们也应该是如此。我有几个非常相似的页面，我将代码分成两个部分，根据某些模型属性是否存在独立包含。像魅力一样工作。 - tvanfosson

Answer 2

是的，您可以在页面中拥有多个$(document).ready()，只需确保在调用此函数之前已经包含了jquery文件。在$(document).ready()内部调用的函数按照请求的顺序调用。

jQuery - 多个 $(document).ready() 是否可行？

- Praveen Prasad

---

你能给我提供任何示例吗？就像我说的，我尝试过了，但是部分视图中的ready事件没有触发... - Safran Ali

@dvlpr：我认为tvanfosson已经写了这个，如果这不能解决你的问题，请告诉我们！！ - Praveen Prasad

Answer 3

没错，只要之前的部分视图没有任何错误，你可以拥有任意数量的 $(document).ready()，它们将会全部触发。

- Jignesh Patel