使用AJAX加载包含html / js的页面

Question

I'm trying to load a php page with AJAX. 我正在尝试使用AJAX加载php页面。 The issue is that it has a "share this" button inside that uses a Javascript script being loaded in that same page. 问题是它内部有一个“共享此”按钮，它使用在同一页面中加载的Javascript脚本。

When I load the page with AJAX, the "share this" button does not display correctly since the Javascript inside is not being loaded. 当我使用AJAX加载页面时，“共享此”按钮无法正确显示，因为未加载Javascript内部。

Any ideas on how I can make the Javascript in the page load? 关于如何在页面中加载Javascript的任何想法？

Thanks, Alain 谢谢，阿兰

PS - I'm using jQuery for javascript PS - 我正在使用jQuery for javascript

UPDATE: 更新：

I still cannot get it to work. 我仍然无法让它发挥作用。 Here is the html/js I'm trying to load: 这是我正在尝试加载的html / js：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=leblon" class="addthis_button_compact" addthis:url="<?php the_permalink(); ?>" addthis:title="<?php the_title(); ?>">Share
<span class="at300bs at15t_compact"></span>
</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>


<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=leblon" id="the-script"></script>
<!-- AddThis Button END -->

Here is a snippet of my javascript file: 这是我的javascript文件的片段：

$.ajax({ url: theURL + link+'/?from=us', success: function(html){
  $('#drink').html(html);
}

Anyone? 任何人？

Answer 1

EDIT/REDO: 编辑/ REDO：

Registered with AddThis, and it seems that its implemented a little different than yours. 注册了AddThis，似乎它的实现与你的有点不同。

HTML TO BE LOADED 要加载的HTML

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'xxx-xxx-xx-xx-xx'});</script>

<span class="st_twitter_large" displayText="Tweet">
</span><span class="st_facebook_large" displayText="Facebook"></span>
<span class="st_ybuzz_large" displayText="Yahoo! Buzz"></span>
<span class="st_gbuzz_large" displayText="Google Buzz"></span>
<span class="st_email_large" displayText="Email"></span>
<span class="st_sharethis_large" displayText="ShareThis"></span>

AJAX SIDE (Loading other page) AJAX SIDE（加载其他页面）

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script tyle="text/javascript">
 var addthis_config = {"data_track_clickback":true};
$(document).ready(function(){
    $.ajax({ url:'test.php', success: function(html){
    $('#content').html(html);

}});
});
</script>
</head>
<body>
<div id="content" style="width:400px;border:1px solid black;height:300px;margin:auto"></div>
</body>
</html>

You may have an older version and the buttons were not being init() upon execution ajax side. 您可能有一个旧版本，并且执行ajax时按钮不是init（）。

Answer 2

It depends on how you're adding the content of the page into your current page. 这取决于您如何将页面内容添加到当前页面中。

Something like this should work: 这样的事情应该有效：

$.get('/path/to/new/page', function(data){
    $('#someDiv').html(data);
});

If that's not working, then the script tags in the pulled page aren't properly being interpreted. 如果这不起作用，那么拉出页面中的脚本标签将无法正确解释。 I believe I ran into this issue a while back, bypassing jQuery may help: $('#someDiv')[0].innerHTML = data , or if that doesn't work you're next step is to use a regex to pull the script tags, manually download and eval those. 我相信我曾经遇到过这个问题，绕过jQuery可能会有所帮助： $('#someDiv')[0].innerHTML = data ，或者如果这不起作用你下一步是使用正则表达式拉脚本标签，手动下载和评估那些。

Answer 3

You can try adding the AJAX onComplete/success event, once triggered call your js function targeting the share button. 您可以尝试添加AJAX onComplete / success事件，一旦触发调用针对共享按钮的js函数。

$.ajax({
  url: "YourPage.php",
  context: document.body,
  success: function(){
    //Call Share Button function
  }
});

And note if there is custom events on your button to use the .live bind method instead of the normal event handlers. 请注意，如果按钮上有自定义事件，则使用.live绑定方法而不是常规事件处理程序。 (.live handles dynamic content) （.live处理动态内容）

使用AJAX加载包含html / js的页面

问题描述

3 个解决方案

解决方案1
1 2011-03-21 21:26:22

EDIT/REDO: 编辑/ REDO：

HTML TO BE LOADED 要加载的HTML

AJAX SIDE (Loading other page) AJAX SIDE（加载其他页面）

解决方案2
0 2011-03-21 21:11:07

解决方案3
0 2011-03-21 22:07:32

使用AJAX加载包含html / js的页面

问题描述

3 个解决方案

解决方案1 1 2011-03-21 21:26:22

EDIT/REDO: 编辑/ REDO：

HTML TO BE LOADED 要加载的HTML

AJAX SIDE (Loading other page) AJAX SIDE（加载其他页面）

解决方案2 0 2011-03-21 21:11:07

解决方案3 0 2011-03-21 22:07:32

解决方案1
1 2011-03-21 21:26:22

解决方案2
0 2011-03-21 21:11:07

解决方案3
0 2011-03-21 22:07:32