第 1 页 有一个带有 id (#navigation) 的菜单，其中有一个名为 Page2 的链接和带有 id (global_content) 的 DIV，单击链接 Page2 时会显示内容。在同一页面(第1页)中，我编写了一个jquery加载函数，这样当我单击链接时，它应该显示内容而无需重新加载页面。加载事件工作正常，显示内容，但没有 Page 2 具有的脚本标记。
这是第 1 页中的代码
<script>
jQuery(document).ready(function() {
//jQuery('#navigation li a').click(function(){
jQuery('#navigation li').on('click', 'a', function(){
var toLoad = jQuery(this).attr('href')+' #global_content';
jQuery('#global_content').fadeOut('fast',loadContent);
jQuery('#load').remove();
jQuery('#wrapper').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#global_content').load(toLoad, function() {
jQuery('#global_content').fadeIn('fast', hideLoader());
});
}
function showNewContent() {
jQuery('#global_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
}); </script>
这是第 2 页中的代码
<div id="wall-feed-scripts">
<script type="text/javascript">
Wall.runonce.add(function () {
var feed = new Wall.Feed({
feed_uid: 'wall_91007',
enableComposer: 1,
url_wall: '/widget/index/name/wall.feed',
last_id: 38,
subject_guid: '',
fbpage_id: 0 });
feed.params = {"mode":"recent","list_id":0,"type":""};
feed.watcher = new Wall.UpdateHandler({
baseUrl: en4.core.baseUrl,
basePath: en4.core.basePath,
identity: 4,
delay: 30000,
last_id: 38,
subject_guid: '',
feed_uid: 'wall_91007'
});
try {
setTimeout(function () {
feed.watcher.start();
}, 1250);
} catch (e) {
}
});
</script>
</div>
<div class="wallFeed">
some content
</div>
但是我得到的输出是
<div id="wall-feed-scripts"></div>
<div class="wallFeed">
some content
</div>
你能帮忙吗？
最佳答案
您可以绕过 jQuery.load stripping <script> tags 的限制通过使用 jquery.ajax直接，这是 shorthand methods 使用的底层方法load , get , post ETC..
我们将使用jquery.html ，它使用 innerHTML ，更新 DOM。
var toLoad = this.href,
toLoadSelector = '#global_content';
...
function loadContent() {
jQuery.ajax({
url: toLoad,
success: function(data,status,jqXHR) {
data = jQuery(data).find( toLoadSelector );
jQuery('#global_content').html(data).fadeIn('fast', hideLoader());
}
});
}
如您所见，我们应用选择器 toLoadSelector ( '#global_content' ) 在响应上仅插入页面的所需部分。
更新
更好的方法是向 loadContent 引入一些参数功能，因此更容易重复使用。这是更新(和测试)的版本:
<script>
jQuery(function($) {
$('#navigation li a').on('click', function() {
loadContent( '#global_content', this.href, '#global_content' );
return false;
});
function loadContent(target, url, selector) {
$(target).fadeOut('fast', function() {
showLoader();
$.ajax({
url: url,
success: function(data,status,jqXHR) {
$(target).html($(data).find(selector).addBack(selector).children())
.fadeIn('fast', hideLoader());
}
});
});
}
function showLoader() {
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>').fadeIn('normal');
}
function hideLoader() {
$('#load').fadeOut('normal');
}
});
</script>
有关更改的一些说明:
jQuery(function() { ... })
与
相同jQuery(document).ready( function() { ... } )
指定 function($)使jQuery可用为$在函数内，这样可以节省一些输入。
现在，关于这个表达式:
$(data).find(selector).addBack(selector).children()
不幸的是，$("<div id='foo'>").find('#foo')不返回任何结果:仅匹配后代。这意味着如果 Page2 具有 #global_content div 直接在<body>下， 不起作用。添加 addBack(selector) 使得匹配顶级元素本身成为可能。请参阅this so question了解更多详情。
.children()确保<div id='global_content'> Page2 中的标签本身不包含在内，否则 Page1 将会包含
<div id="global_content">
<div id="global_content">
这在技术上是非法的，因为 id在文档中必须是唯一的。
关于javascript - Jquery load() 不加载 div 中的脚本标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34268224/