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内容中有一个脚本。

我宁愿不采用前一种方法，因为我有一种更通用的方式来加载页面（使用<a>标记的href属性），并在页面加载时引入特殊情况只是uglifies这一切。我认为后一个解决方案是一个相当好的解决方案，但我不想将<script>标记放入我正在检索的页面内容中。我喜欢将内容与行为分开，所有这一切，我觉得这可能会把它混合起来。

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

Answer 1

您可能希望了解jQuery的live()事件绑定。

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

修改：确切地说，live()绑定到$(document)并检查通过DOM一直冒泡的事件的target属性 - 这就是为什么即使在绑定事件回调后添加元素时绑定仍然有效。

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

在页面内容加载Ajax之后加载Javascript

1 个答案: