.load和.on("load")的区别

Question

我正在将一个PHP页面加载到一个DIV中，该DIV使用一个发送的变量来显示正确的内容。这是使用以下方式实现的：

$(".mainArea").load("page.php", {'folder': 'a'}).fadeIn(); 
//passes vars, but all my jquery event handlers no longer work

问题在于，当我动态加载这个内容后，我无法使我的事件处理器正常工作。因此，我认为解决方案应该是这样的：

$(".mainArea").on("load", "page.php", {'folder': 'a'}).fadeIn(); 
// all event handlers still work - but the variables do not get posted...

有什么想法可以将这两个内容合并，或是让后者实际传递变量？

- waterlostinthewell

---

我认为load()函数用于加载，而on("load")函数则用于注册事件处理程序。 - tstenner

这是两个完全不同的问题。从jQuery API on .load中可以看到：从服务器加载数据并将返回的HTML放入匹配的元素中。...注意：事件处理套件还有一个名为.load()的方法。jQuery根据传递给它的参数集确定要触发哪种方法。我无法理解将load的数据获取部分移动到仅处理事件监听的on中会有任何意义。 - David Hedlund

它们不是同一件事情是有道理的...我猜我需要使用$(".mainArea").load("page.php", {'folder': 'a'}).fadeIn();来加载内容。我只需要让我设置的所有事件继续工作。所以这些事件是绑定在动态加载的内容内部的元素上的... - waterlostinthewell

Answer 1

• .load从指定的URL加载数据，并将结果内容放置在指定的元素中。

• load事件在元素及其子元素完全加载后发生。此事件仅适用于某些类型的元素。

基本上，它们执行两个完全不同的功能（但在jQuery中它们具有相同的函数名称，因此容易混淆）。

至于您在加载新内容时事件处理程序被解除绑定的问题，您需要使用on进行事件委托：

$("container_selector").on("event", "child-element-selector", function () {...});

- Andrew Whitaker

---

所以 - 这将与加载内容分开...例如，我有一个“href”标签，它触发了动态加载内容中的事件。我必须像这样设置事件监听器：$（“.link”）。on（“click”，“a”，function（）{...}）; - waterlostinthewell

@waterlostinthewell：我认为那会起作用，但你也可以直接使用 $(".link").live("click", function () {...});。 - Shawn31313

@andrew：这似乎解决了我眼前的问题。我现在明白了.load和on("load")的区别。如果我打算加载动态内容，我的事件监听器应该使用.on进行设置。谢谢！ - waterlostinthewell