加载的Javascript后装入Ajax的网页内容 [英] Load Javascript after page content is loaded with Ajax

问题描述

我使用Ajax（和jQuery，也CoffeeScript的）加载在一个新的网站，我创建页面。对于导航菜单然后我使用jQuery函数 负荷 加载页面（即内容），像这样的一个部分（从 /第1页）：

I am using Ajax (and jQuery, and also CoffeeScript) to load pages in a new web-site I am creating. For the navigation menu I then use the jQuery function load to load only one part of the page (namely, the content) like this (from /page1):

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

  false

这里的问题是，我在页 JavaScript的code（或者，更确切地说，在模板文件）是全球性的网站上（由于以该资产的管道，因为我用Rails 3.1）。这code结合一些行动，以事件（这是正确的术语？）在位于第2页的DOM元素。但是，由于这个脚本是运行在第一次加载（这很容易可以页），然后结合这些动作的元素的脚本将在执行页页，因而DOM元素，他们实际上的应的绑定（在第2页）不会被触及。

The problem with this is that I have JavaScript code in page1 (or, more correctly, in a template file) that is global on the site (due to the asset pipeline as I am using Rails 3.1). This code binds some actions to events (is this the correct jargon?) in DOM elements that are located in page2. But, as this script is run in the page that is first loaded (which easily could be page1), then the script that binds these actions to the elements will be executed in page1, and thus the DOM elements that they actually should be bound to (in page2) will not be touched.

现在，我知道有些方法可以解决此问题，但我不喜欢他们都没有。其中的一个将加载第2页阿贾克斯后，把这个动作/事件绑定成一个函数，然后再调用此方法，但这需要我要么引入特殊情况下，在我的网页加载逻辑，我页面加载后，装载绑定功能，绑定的元素，或者在该第2页内容，我调用该函数的脚本。

Now, I know some ways I can fix this, but I don't like neither of them. One of these would be to put this action/event binding into a function, and then call this method after loading page2 with Ajax, but this would require me to either have introduce a special case in my page loading logic where I load the binding function after page load to bind the elements, or to have a script in the page2 content where I call the function.

我宁愿不与前一种方法去，因为我有页面加载一个更一般的方式（通过使用＆LT; A＆GT; 标签的 HREF 属性），并引入特殊情况下，在页面加载只是uglifies这一切。后者的解决方案是一个相当漂亮一个我相信，但我不想把＆LT;脚本＆GT; 标签到，我检索页面的内容。我喜欢分离行为的内容和所有的，我觉得这可能是混合了全面的总结了一下。

I would rather not go with the former approach, as I have a more general way of loading pages (by using the <a> tag's href attribute), and introducing special cases on page load just uglifies it all. The latter solution is a rather nicer one I believe, but I would hate to put <script>tags into the content of the page that I am retrieving. I like separating content from behaviour and all that, and I feel that this might be mixing it all up a bit.

所以，我真的很想知道这里是什么将是解决这一问题的好办法。如果有任何人知道如何去这样做，那么我欢迎任何建议。

So, what I really want to know here is whatever would be a good way to solve this problem. If anyone out there knows how to go about doing this, then I would welcome any suggestions.

推荐答案

您可能想看看jQuery的 生活（） 事件绑定。

You might want to look into jQuery's live() event binding.

绑定赛事直播（）应用于追溯添加的DOM元素为好，这应该可以解决你的问题。

Events bound with live() are applied to retrospectively added DOM elements as well, which should solve your problem.

编辑：为了precise，生活（）结合 $（文件）并检查目标已起泡一路通过DOM事件的属性 - 这就是为什么绑定工作，甚至当元素绑定事件回调后，加

To be precise, live() binds to $(document) and checks the target attribute of events that have bubbled all the way up through the DOM – that's why the binding works even when elements are added after binding the event callback.

例如HTML：

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

例如jQuery的：

Example 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.

这篇关于加载的Javascript后装入Ajax的网页内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！