為什么在Ajax調用后我的外部Javascript不運行？
[英]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（），都沒有成功！！ 有什么我做不對的事情嗎？
2 個解決方案
解決方案1
0 2015-06-20 09:15:14
您的基本問題是$(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);所有實例$(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;
})
})
});
解決方案2
0 2016-02-28 19:43:18
我最近三天一直在尋找這個問題的答案。 所有可能的變體均不適用於外部腳本鏈接。 但是，我找到了一種使其工作的方法。 我想分享這個解決方案，也許對將來遇到相同問題的任何人都會有用：
//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/ 。
在jquery中成功調用ajax后，為什么不加載此函數？
[英]Why doesn't this function load after a successful ajax call in jquery?
為什么我的Ajax post.request調用我的方法，卻什么也沒做？
[英]Why does my ajax post.request call my method, but doesn't do anything?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.