JQuery脚本的动态内容和多次加载

Question

我有一个动态加载内容的页面。根据用户单击的菜单项，使用jquery动态加载和显示不同的表。

每个表的一列都有一个更新链接，用于更新特定行表示的内容。单击该链接时，将显示一个JQuery UI Modal对话框，其中包含一个从服务器加载的表单，用户应在该表单中更新内容并回发。

这就是我对它的理解，如果我错了，请纠正我。我需要在加载动态内容的同时加载jquery脚本，以便在javascript函数和正在加载的元素之间绑定事件。

假设我的假设是正确的，那么每次用户选择不同的表时，我都会加载内容和相同的JQuery UI对话框脚本。我从与主索引文件一起加载的不同javascript函数加载内容和jquery文件。

其结果是不可预测的行为(使用相同的用例可能是可预测的)。当多次加载表并更新某些内容以显示模式对话框时，作为一个示例，在第一次或第二次使用后不再显示该对话框。

jquery脚本被多次加载会不会有问题？如果是，我应该用什么原则或模式来处理这类应用。如果以上所有都是错误的假设，那么设计这种解决方案的原则或模式是什么呢?在这种解决方案中，不同类型的动态内容被加载到多个位置(所有内容都显示在同一个索引文件中)，并且都需要相同的jquery文件。

Answer 1

如果我理解正确的话，您问的是如何在动态生成的内容上绑定事件。事实上，您不必在加载新内容的同时加载新脚本，以便能够将事件挂钩到所述内容。

您需要的是jQuery 'live'处理程序。您可以使用标准jQuery选择器指定绑定的目标。但是，不使用以下语法：

$('.foo').click(function(){ });

您将使用

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

其工作方式是通过事件冒泡，在子元素(如输入框)上调用的事件在所有父节点上“冒泡”。在本例中，jQuery只是观察整个文档中的事件气泡，然后将其与特定的选择器条件进行匹配。

Answer 2

看看jQuery $.live()和$.delegate()：

http://api.jquery.com/live/

http://api.jquery.com/delegate/

这些将允许您将事件绑定到动态加载的内容。

Answer 3

如果我没理解错的话：

1)多个表，每行都有更新链接以更新其内容。

2)更新按钮打开一个带有表单的模式框。

3)表单投递，数据经服务器处理后取回，反馈相关表行。

如果上面描述的流程是正确的，我不明白为什么要多次加载jQuery或jQuery ui。

你应该像这样做

1)加载包含所有所需脚本的页面。

2)使用jquery .ajax()方法(doc)设置和ajax调用

3)使用ajax调用将表单数据提交到服务器并检索结果

4)使用.ajax()的成功回调向该行提供更新后的数据。在success方法中，您应该能够检索上下文(也称为您所单击的链接)，并标识您所单击的实际行。

我希望我说的有道理。

如果碰巧需要创建新行，那么应该考虑检查jQuery的.live()和.delegate()方法。

祝好运。