加载javaScript后页面内容加载了AJAX

Question

我正在使用Ajax（以及Jquery和Coffeescript）来加载页面，以在我创建的新网站中加载。对于导航菜单，我然后使用jQuery函数 load 仅加载页面的一部分（即内容） /page1):

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

  false

问题是我在 page1 （或更正确地，在模板文件中）是该站点上全局的（由于我使用的是Rails 3.1时的资产管道，因此资产管道）。此代码将某些动作绑定到事件（这是正确的术语吗？） page2. 。但是，由于此脚本是在首先加载的页面中运行的（很容易成为 page1），然后将这些操作绑定到元素的脚本将在 page1, ，因此他们实际上是 应该 被束缚（在 page2）不会被触摸。

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

我宁愿不采用以前的方法，因为我有一种更通用的加载页面（通过使用 <a> 标签 href 属性），并在页面加载上引入特殊情况只会使所有内容都丑化。我相信后一个解决方案是一个更好的解决方案，但我不愿意放 <script>标记我要检索的页面内容。我喜欢将内容与行为和所有这些分开，并且我觉得这可能会使所有内容混合在一起。

因此，我真正想在这里知道的是解决这个问题的好方法。如果外面有人知道该怎么做，那么我将欢迎任何建议。

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.