为什么我的外部Javascript在Ajax调用后不运行
Why doesn't My External Javascripts Run after an Ajax Call?
我的索引页中有这段代码，除了 #content 中的内容外，其他页面几乎相同：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- TITLE -->
<title>Home | The Ajax Project</title>
<!-- Favicons -->
<!-- STYLES -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="nav-bar">
<div class="nav-container">
<div class="nav-toggle">
<a href="">
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</a>
</div>
<ul class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="content">
<section class="page-sect" data-bg="assets/images/slides/slide1.jpg">
<div class="home-section">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h1 class="main-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in vero a. </h1>
</div>
</div>
</div>
</div>
</section>
<section class="fullwidth">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5>This is the first Page</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil perspiciatis saepe harum eos quas aut. Quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p>
</div>
<div class="col-md-6">
<h5>This is the first Page</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil perspiciatis saepe harum eos quas aut. Quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script id="runscript" type="text/javascript" src="assets/js/custom.js"></script>
<script id="runscript" type="text/javascript" src="assets/js/test.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script>
</body>
</html>
在我的ajax.js中，我有这段代码通过ajax调用其他页面：
$(document).ready(function() {
$('.nav-menu li a').each(function() {
$(this).on('click', function() {
var thisAttr = $(this).attr('href');
function doAjax() {
$.ajax({
url: thisAttr,
success: function(responseHtml) {
$('#content').html($(responseHtml).filter('#content').html());
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
},
error: function() {
alert('error!!');
}
});
}
$('#content').addClass('out');
setTimeout(doAjax, 1000);
setTimeout(function() {
$('#content').removeClass('out');
}, 1000);
return false;
})
})
});
一切正常。Ajax 请求按计划进行，但这些脚本中的代码<script type="text/javascript" src="assets/js/custom.js"></script>
<script type="text/javascript" src="assets/js/test.js"></script>根本不起作用。我的困惑是：为什么它们不起作用，因为它们仍在源页面上？我已经尝试了包括 Eval（） 在内的所有方法，但没有成功！！我有什么地方做得不对吗？
您的基本问题是$(document).ready(XYZ);将只调用一次 XYZ - 当主页加载时。当您从 ajax 内容中更改页面时，将不再调用它。因此，您需要在每次 ajax 内容执行其更改后再次调用 $(document).ready 调用的函数。
这是一种（非常快速和肮脏的）方法...（注意：未经测试！
首先，在两个脚本块之间添加一行，如下所示：
<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">var updateCallbackCollector=[];</script>
<script type="text/javascript" src="assets/js/custom.js"></script>
<script type="text/javascript" src="assets/js/test.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script>
然后，将自定义脚本中的所有 $(document).ready(XYZ); 实例替换为updateCallbackCollector.push(XYZ);，ajax.js文件除外。
然后，像这样更改ajax.js：
$(document).ready(function() {
/////////// new stuff starts here ///////////
for(var callback in updateCallbackCollector) {
updateCallbackCollector[index]();
}
/////////// new stuff ends here ///////////
$('.nav-menu li a').each(function() {
$(this).on('click', function() {
var thisAttr = $(this).attr('href');
function doAjax() {
$.ajax({
url: thisAttr,
success: function(responseHtml) {
$('#content').html($(responseHtml).filter('#content').html());
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
/////////// new stuff starts here ///////////
for(var index in updateCallbackCollector) {
updateCallbackCollector[index]();
}
/////////// new stuff ends here ///////////
},
error: function() {
alert('error!!');
}
});
}
$('#content').addClass('out');
setTimeout(doAjax, 1000);
setTimeout(function() {
$('#content').removeClass('out');
}, 1000);
return false;
})
})
});
在过去的 3 天里，我一直在寻找这个问题的答案。所有可能的变体都不适用于外部脚本链接。但是，我找到了一种方法来使其工作。我想分享这个解决方案，也许它对将来遇到相同问题的任何人都有用：
//Using scripts inserted through text editor
if ($('#page-main-content')) {
$('#page-main-content').find("script").each(function (i) {
var src = $(this).attr("src");
if (src != "undefined" && src != "") {
//In case if we have external script
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
var charset = $(this).attr("charset");
if (charset != "undefined" && charset != "") {
script.charset = charset;
}
var divName = "div" + $.now();
$(this).after('<div id="' + divName + '"></div>');
//Remove initial script
$(this).remove();
var myDiv = document.getElementById(divName);
myDiv.appendChild(script);
} else {
//In case if we have internal local script
eval(document.getElementById("page-main-content").innerHTML);
}
});
}
请注意一件重要的事情（我不知道为什么会这样）：如果您更换行：
var myDiv = document.getElementById(divName);
myDiv.appendChild(script);
使用 jQuery：
var myDiv = $('#' + divName);
myDiv.appendChild(script);
脚本链接将插入到div 标签中，但脚本不会运行...因此，在这里使用本机javascript函数document.getElementById，如我上面的第一个代码示例中所述。
在我的一切正常。您可以使用此功能看到工作网站的链接：http://aikiclub.com.ua/。
相关文章：
- 运行Infinite Scroll后调用函数时出现问题
- 重新运行上次进行的AJAX调用
- For循环在调用时未运行
- AJAX调用运行C代码的最佳实践
- HTML5(Bootstrap）通过函数调用运行动画
- 在jquery中完成ajax调用后，如何运行一些代码
- 防止函数在从ajax再次调用后多次运行
- 如何显示由ajax调用运行的PHP文件的echo
- Ajax调用在InternetExplorer中冻结UI，但在firefox中运行良好
- 通过Wordpress中的jquery调用运行php文件
- JavaScript只有在最后一次被调用时才运行函数
- 在异步AJAX调用完成后，通过变量运行函数
- 如何从 MVC4 链接调用 Javascript 方法(错误 JavaScript 运行时错误:对象不支持此操作）
- 运行一次函数，然后在 5 秒内禁止进一步调用
- 运行 AJAX 需要什么 - 将 jQuery 添加到页面处理 AJAX 调用
- 从 jquery.ready(） 调用的 javascript 何时相对于 中的脚本运行
- 如何使用仅在运行时已知的变量名称调用 JavaScript 函数
- 从ajax成功调用运行javascript函数
- 是否有一种方法可以在更改页面时保持ajax调用运行
- 如何递归调用/运行jQuery嵌套模板
