文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery绑定事件

问Jquery绑定事件
EN

Stack Overflow用户

提问于 2010-11-10 20:34:12

回答 2查看 82关注 0票数 0

为什么绑定到元素的事件的处理程序会触发错误的结果？我希望下面的Div1的点击事件会弹出一个对话框'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>

jquery

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-11-10 20:42:40

这似乎是一个典型的闭包问题，因为当您单击div (any)时，i变量已经到达for循环的末尾(因此它总是打印最后一个值)。试着像这样改变

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

票数 2

Stack Overflow用户

发布于 2010-11-10 20:45:52

你的问题出在这段代码中：

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'))。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4144494

复制

相似问题

问Jquery绑定事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery绑定事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery绑定事件
EN