使用 Ajax 加载页面内容后加载 Javascript

Question

我正在使用 Ajax（以及 jQuery，还有 CoffeeScript）在我正在创建的新网站中加载页面。对于导航菜单，我使用 jQuery 函数 load 仅加载一个页面的一部分（即内容）如下（来自 /page1）：

$( 'a' ).click ->
  $( '#container' ).load '/page2 #content'

  false

问题是我在 page1 中有 JavaScript 代码（或者更正确地说，在模板文件中）在站点上是全局的（由于资产管道因为我使用的是 Rails 3.1）。此代码将一些操作绑定到位于 page2 中的 DOM 元素中的事件（这是正确的术语吗？）。但是，由于此脚本在首次加载的页面（很容易是 page1）中运行，因此将这些操作绑定到元素的脚本将在 page1 中执行>，因此它们实际上应该绑定到的 DOM 元素（在 page2 中）将不会被触及。

现在，我知道一些可以解决这个问题的方法，但我都不喜欢它们。其中之一是将此操作/事件绑定放入一个函数中，然后在使用 Ajax 加载 page2 后调用此方法，但这需要我在页面加载中引入特殊情况我在页面加载后加载绑定函数以绑定元素的逻辑，或者在我调用该函数的 page2 内容中包含一个脚本。

我宁愿不采用前一种方法，因为我有一种更通用的加载页面的方法（通过使用 标记的 href 属性），并引入特殊的页面加载的情况只会丑化这一切。我相信后一种解决方案是一个相当好的解决方案，但我不想将

所以，我真正想知道的是解决这个问题的好方法。如果有人知道如何去做这件事，那么我欢迎任何建议。

Answer 1

您可能想研究一下 jQuery 的 live() 事件绑定。

与 live() 绑定的事件也适用于追溯添加的 DOM 元素，这应该可以解决您的问题。

编辑：准确地说，live()绑定到$(document)并检查事件的target属性它们一直在 DOM 中向上冒泡——这就是为什么即使在绑定事件回调后添加元素，绑定仍然有效。

HTML 示例：

<div id="some_triggers">
    <a id="foo" href="#">Foo!</a>
</div>

jQuery 示例：

$('#foo').click(function(){ alert('foo') });
$('#bar').click(function(){ alert('bar') });
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>');
$('#foo').live('click', function(){ alert('foo live()!') });
$('#bar').live('click', function(){ alert('bar live()!') });

// -> clicking #foo alerts "foo" and "foo live()"
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.