js 变量作用域

Question

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的值不变？
待解决...

Answer 1

1、$("#"+div1).click(function(){})语句运行时，明显div1变量为空字符串，根本不是针对div2对象注册事件处理函数。
2、div1变量值有发生改变，当你点击过第一个DIV时

Answer 2

 var div1 = "";
        $("#div1").click(function () {
            div1 = "div2";
            alert("i am div1");
            $("#" + div1).click(function () {
                alert("i am div2");
            });        });

Answer 3

  $("#div1,#div2").click(function () {
            alert($(this).attr("id"));
                 这样写吧， 得到 了自己去判断做相应的处理。
        })

Answer 4

感谢回答，关于回答<1>没明白
关于回答<2>:如果点击第一个DIV变量div1的值改变了，那么第二个点击事件也应该执行啊

Answer 5

如果非要这么写 就这样吧。   $("#div1").click(function () {
            alert("i am div1");
            $("#div2").unbind("click");  //清除之前绑定的click事件，否则事件会累加
            $("#div2").bind("click", function () {
                alert("i am div2");
            })
        });

Answer 6

主要是div1这个变量的赋值问题，应该是第二次点击事件执行时div1的值没有改变还是“”
所以我想问这个值为什么没有改变

Answer 7

  // 因为你div2事件要在div1触发之后 才可以触发， 
        // 所以肯定是要嵌套在div1 click里面的  如果你一定要 这样写，通过DIV来改变，不写死绑定事件如下。
        var div1 = "";
        $("#div1").click(function () {
            div1 = "div2";
            alert("i am div1");
            $("#" + div1).unbind("click");  //清除之前绑定的click事件，否则事件会累加
            $("#" + div1).click(function () {
                alert("i am div2");
            });
        });

Answer 8

你怎么还没明白呢？ 二楼把你的问题说出来了，我是根据你的写法纠正你的错误，
第二次点击之所以没有效果，是因为JS就报错了，你用调试器看下脚本就知道了，
你初始化只绑定了div1 事件， 而变量div1初始化是="" 的，当点击后才会是div2 ，相当于这样绑定的效果
  $("#" +“”).click(function () {
                alert("i am div2");
            });都报错了。

Answer 9

var div1 = '';
console.log(div1);
$('#div1').click(function(){
div1 = 'div2';
console.log(div1);
});
console.log(div1);
if($('#' + div1)[0]) {
$('#' + div1).click(function(){
console.log('what you wanted;');
});
} else {
console.log('something wrong');
}

Answer 10

JS的执行顺序问题。
$("#div1").click(function(){})这是在绑定点击事件，并不执行里面的函数。事件绑定是一次性的，只执行一次，所以初始的时候，这段JS给$("#div")和$("#")这两个对象绑定事件，当然第二个所要查找的DOM对象是不存在的。
而后在页面里面点击div1，触发点击事件而执行上一步绑定的处理函数，此时div1的值变为'div2'，但是事件绑定工作在第一步已经完成了，不会再去执行后面$("#"+div1).click(function(){})，所以#div2就没有绑定到处理函数。
这是两个时序的操作，不要弄混了。
可以按照以上各位给出的写法，动态的绑定事件，在div1值改变的时候才绑定事件。

Answer 11

OK，OK 感谢各位的回答
特别是hutuxu的讲解
还有ILOVE_ASPNET的解决方法