呈现模态视图并将事件绑定到它的最佳实践是什么?

What is the best practice for presenting a modal view and binding events to it?

本文关键字：最佳 是什么 绑定 模态 视图 事件      更新时间：2023-09-26

在一个非常常见的场景中，我有一个带有"Add"按钮，该按钮打开一个模态对话框(通过Facebox)，并要求用户从其中出现的列表中选择项目。

模态对话框从服务器异步获取它的HTML片段。我希望这个代码片段可以在我的应用程序的许多部分重用，所以它不应该假设我使用Facebox来加载它。它唯一要做的就是在用户选择其中的一个项目时触发item-selected事件。但是由于代码段是异步加载的，所以我不能使用$(document).ready。也就是说，我不能像这样触发事件:

$(document).ready(function() {
  $(".item").click(function() {
    $(".items-modal-dialog").trigger("item-selected", this);
  });
});

另外，我真的不喜欢使用items-modal-dialog类来标识封闭的DOM元素。

我想出了一些解决方案，我想知道是否有一些优秀的模式，我错过了，因为我认为这是一个非常普遍的问题。

  1. 把脚本后所有的HTML，所以我确信片段DOM加载(我认为这是一个坏的做法)
    2. 创建一个JavaScript函数，用Facebox加载代码片段，然后绑定事件。这样我就假设我在使用Facebox，并且还必须为我创建的每种类型的模态对话框创建一个函数。我看到的唯一积极的一面是，我可以以编程方式创建items-modal-dialog DIV，所以我不必使用类来识别它。
  2. 使用jQuery实时绑定事件。
    3. 使用iframe和$(document).ready。

在我看来，使用jQuery的live或delegate函数是最好的解决方案。

相关文章：