Jquery绑定事件

为什么绑定到元素事件的处理程序触发了错误的结果？我期望下面Div1的点击事件弹出一个对话框，说明'div1'，但弹出'div2'。Jquery绑定事件

我对此很陌生，我正在摸索着解决这个问题的原因。我希望有任何帮助解释。

干杯，

亚历

<!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>

来源

2010-11-10 AlexC

这似乎是一个典型的封闭问题，因为当你在DIV点击（任何）i变量已经达到for循环结束（所以它总是打印最后一个值）。尝试改变，像这样

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

来源

2010-11-10 12:42:40

为什么这会继续产生错误的值：function TestWhatIsGoingOn（myObjToTest）{myObjToTest {var MyName}; myObjToTest [i] .TabName; $（'＃'+ tn）.click（function（）{TestResult（'TabName：'+ tn）;}）; } } – 2010-11-10 12:48:05

谢谢，在阅读完关闭后，我可以看到问题所在。 – AlexC 2010-11-10 15:08:20

您的问题是在这部分代码：

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

来源

2010-11-10 12:45:51 lonesomeday

感谢您的回应，这是解决问题的另一种方法。我打算构建一个插件，并让用户传入div的id数组来使用。阅读关于谷歌关闭，我可以看到我哪里错了。干杯！ – AlexC 2010-11-10 15:12:04

Jquery绑定事件

回答

相关问题