Jquery binding events
<p>Why does the handler bound to an event of an element fire the wrong result?  I would expect the click event of Div1 below to popup a dialog stating 'div1' but it popup's 'div2'.</p>

<p>I am new to this and I am scratching my head to work out why this is happening.  I would appreciate any help to explain.</p>

<p>Cheers,</p>

<p>Alex</p>

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

&lt;script type="text/javascript"&gt;
    //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);
    });

&lt;/script&gt;

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

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