js 变量作用域
code--js
var div1 = "";
$("#div1").click(function(){
div1="div2";
alert("i am div1");
});
$("#"+div1).click(function(){
alert("i am div2");
});
code--html
<div style="background-color: red; width: 50px;height:50px" id="div1"></div>
<div style="background-color: green; width: 50px;height:50px" id="div2"></div>
问题:
1.为什么第二个click没有执行?
div1的值没有变
2.为什么div1的值不变?
待解决...
------解决方案--------------------
var div1 = "";
$("#div1").click(function () {
div1 = "div2";
alert("i am div1");
$("#" + div1).click(function () {
alert("i am div2");
});
});
------解决方案--------------------JS的执行顺序问题。
$("#div1").click(function(){})这是在绑定点击事件,并不执行里面的函数。事件绑定是一次性的,只执行一次,所以初始的时候,这段JS给$("#div")和$("#")这两个对象绑定事件,当然第二个所要查找的DOM对象是不存在的。
而后在页面里面点击div1,触发点击事件而执行上一步绑定的处理函数,此时div1的值变为'div2',但是事件绑定工作在第一步已经完成了,不会再去执行后面$("#"+div1).click(function(){}),所以#div2就没有绑定到处理函数。
这是两个时序的操作,不要弄混了。
可以按照以上各位给出的写法,动态的绑定事件,在div1值改变的时候才绑定事件。