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

Question

我正在使用 Ajax(和 jQuery，还有 CoffeeScript)在我正在创建的新网站中加载页面。对于导航菜单，我然后使用 jQuery 函数 load 像这样(来自 /page1 )只加载页面的一部分(即内容):

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

  false

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

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

我宁愿不采用前一种方法，因为我有一种更通用的加载页面的方法(通过使用 <a> 标记的 href 属性)，并且在页面加载时引入特殊情况只会丑化这一切。我认为后一种解决方案更好，但我不想把 <script>标记到我正在检索的页面的内容中。我喜欢将内容与行为等分开，我觉得这可能会把它们混在一起。

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

Answer 1

您可能想查看 jQuery 的 live()事件绑定(bind)。

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

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

示例 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.