我正在从加载了 ajax 的 html 执行脚本，但在访问父 html 上声明的变量时出现“变量未定义”错误。
这是我的代码:
index.php
<div id="ajaxLoad"></div>
<button id="buttonLoad">Load</button>
<script>
$(function () {
var varFromMain = 1; // this is the variable
$("#buttonLoad").click(function () {
$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : "",
async : true,
success : function( data ) {
$("#ajaxLoad").html(data);
},
error: function(xhr, mesage, error) {
}
});
});
});
</script>
loaded.php
this is loaded from Ajax
<script>
$(function () {
alert(varFromMain);
});
</script>
这是我在控制台上得到的:
当然，如果我全局声明变量，我可以从加载的脚本中成功访问 varFromMain。
<script>
var varFromMain = 1; // this is the variable, declared globally
$(function () {
$("#buttonLoad").click(function () {
$.ajax({
有人可以解释一下吗？
更新:
出于这个原因，我将在下面接受陈的回答:我尝试在同一个文件上声明另一个匿名函数，但我已经遇到了同样的错误。
因此该变量只能从声明它的匿名函数访问。但它并没有被摧毁。
<body>
<button id="buttonLoad">Load</button>
<div id="ajaxLoad">
</div>
<button id="checkVarMain">Check Variable</button>
<button id="checkFromFunc">Check From Jquery Function</button>
</body>
<script>
$(function () {
var varFromMain = 1;
$("#buttonLoad").click(function () {
var self = $("#ajaxLoad");
$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : "",
async : true,
success : function( data ) {
self.html(data);
},
error: function(xhr, mesage, error) {
}
});
});
$.fn.TestVarFromMain = function() {
alert(varFromMain);
}
});
$(function () {
$("#checkVarMain").click(function () {
alert(varFromMain); // get's reference error
});
$("#checkFromFunc").click(function () {
$.fn.TestVarFromMain(); // Still displays the variable
});
});
</script>
最佳答案
它是这样的:
- 匿名函数被调用，varFromMain 在函数作用域内被声明
- AJAX 请求已发送
- AJAX请求成功
- 运行成功回调(打印新的 JS)。
- (回调完成后)匿名函数完成，作用域被销毁，varFromMain 不复存在。
- 新的 JS 运行。
如果您全局声明 varFromMain，它始终停留在文档范围内。
关于javascript - Ajax 加载脚本上的 Jquery 变量作用域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40098894/