如何在jQuery的不同事件处理器之间传递变量？

嘿，我一眼就看出问题出在哪了——变量作用域冲突！

你在$(document).ready()的外层作用域声明了var $type，但在第一个按钮点击事件里又重新写了var $type = "passme";。这个var关键字会在当前点击函数的局部作用域里创建一个全新的变量，完全和外层的$type划清了界限。所以当你点击提交按钮时，外层的$type还是处于未定义的状态，自然弹不出你想要的"passme"。

最简单的修正方案 #

去掉局部作用域里的var，直接修改外层变量：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
var $type;
$('button').click(function(){ 
if($(this).text() == "Click Me") { 
$type = "passme"; // 去掉var，直接引用外层变量
} 
}); 
$('button[type=submit]').click(function(){ 
alert($type); 
}); 
}); 
</script> 
</head> 
<body> 
<button type="submit">Click Me</button> 
</body> 
</html>

更优雅的替代方案：使用jQuery的data()方法 #

如果不想依赖外层作用域，推荐用jQuery的data()方法在DOM元素上存储数据，这样更模块化，也避免作用域问题：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('button').click(function(){ 
if($(this).text() == "Click Me") { 
$(this).data('type', 'passme'); // 把数据存在按钮元素上
} 
}); 
$('button[type=submit]').click(function(){ 
alert($(this).data('type')); // 从按钮元素读取数据
}); 
}); 
</script> 
</head> 
<body> 
<button type="submit">Click Me</button> 
</body> 
</html>

这种方式的好处是，数据和对应的DOM元素绑定，逻辑更清晰，也不会污染外层作用域~

内容的提问来源于stack exchange，提问作者ddd