jQuery绑定事件

Question

为什么绑定到元素事件的处理程序会产生错误的结果？ 我希望下面的Div1的click事件会弹出一个对话框，提示“ div1”，但会弹出“ div2”。

我是新来的人，我挠头想弄清楚为什么会这样。 我将不胜感激任何解释。

干杯，

亚历克斯

<!DOCTYPE html>
<html>
<head>
<title>TestEvents</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    //Object Array
    var objToTest = [{ TabName: "div1" },
             { TabName: "div2"}];

    //Adds events to each div
    function TestWhatIsGoingOn(myObjToTest) {
         for (i in myObjToTest) {
             $('#' + myObjToTest[i].TabName).click(function() { TestResult('TabName: ' + myObjToTest[i].TabName); });
         }
     }

    function TestResult(message){
        alert(message);
    }

    $(document).ready(function() {
        TestWhatIsGoingOn(objToTest);
    });

</script>

<style type="text/css">
    #div1, #div2
    {
     border: solid thin black;
     height: 100px;
     width: 300px;
    }
</style>

</head>
<body>
    <div id='div1'>div1; click here to show expected result: 'TabName: div1'</div>
    <div id='div2'>div2; click here to show expected result: 'TabName: div2'</div>
</body>
</html>

Answer 1

这似乎是一个经典的关闭问题，因为当您单击div（任意）时， i变量已经到达了for循环的末尾（因此它始终显示最后一个值）。 尝试像这样改变

function TestWhatIsGoingOn(myObjToTest) {
    for (i in myObjToTest) {
       (function(i) {
           $('#' + myObjToTest[i].TabName).click(function() { TestResult('TabName: ' + myObjToTest[i].TabName); });
       )(i);
    }
}

Answer 2

您的问题在这段代码中：

for (i in myObjToTest) {
    $('#' + myObjToTest[i].TabName).click(function() {
        TestResult('TabName: ' + myObjToTest[i].TabName);
    });
}

问题是i的值未硬编码到本节中。 函数运行时，它将看到i的当前值。 由于您已将其递增以引用第二个选项卡，因此此功能将始终引用第二个选项卡。 Javascript的此功能称为闭包-它以i的值关闭。

解决此问题的最简单方法是使用jQuery一次绑定到多个对象，然后根据单击的对象进行评估：

$(document).ready(function(){
    $('div').click(function(){
        alert('TabName: ' + this.id);
    });
});

这将完成您希望问题中的代码执行的所有操作。

在现实情况下，您可能需要给div一个通用类（例如toClick ），然后使用jQuery类选择器（ $('.toClick') ）。

jQuery绑定事件

问题描述

2 个解决方案

解决方案1
2 已采纳

解决方案2
1 2010-11-10 12:45:51

jQuery绑定事件

问题描述

2 个解决方案

解决方案1 2 已采纳

解决方案2 1 2010-11-10 12:45:51

解决方案1
2 已采纳

解决方案2
1 2010-11-10 12:45:51