[jQuery] Difference between two code fragments

[jQuery] Difference between two code fragments


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>[jQuery] Difference between two code fragments</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"><!--
body {
margin: 5px 5px 5px 5px;
background-color: #ffffff;
}
/* ========== Text Styles ========== */
hr { color: #000000}
body, table /* Normal text */
{
font-size: 9pt;
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}
span.rvts1 /* Heading */
{
font-size: 10pt;
font-family: 'Arial';
font-weight: bold;
color: #0000ff;
}
span.rvts2 /* Subheading */
{
font-size: 10pt;
font-family: 'Arial';
font-weight: bold;
color: #000080;
}
span.rvts3 /* Keywords */
{
font-size: 10pt;
font-family: 'Arial';
font-style: italic;
color: #800000;
}
a.rvts4, span.rvts4 /* Jump 1 */
{
font-size: 10pt;
font-family: 'Arial';
color: #008000;
text-decoration: underline;
}
a.rvts5, span.rvts5 /* Jump 2 */
{
font-size: 10pt;
font-family: 'Arial';
color: #008000;
text-decoration: underline;
}
span.rvts6
{
font-size: 8pt;
font-family: 'arial';
font-style: italic;
color: #c0c0c0;
}
a.rvts7, span.rvts7
{
font-size: 8pt;
font-family: 'arial';
color: #0000ff;
text-decoration: underline;
}
span.rvts8
{
font-weight: bold;
}
/* ========== Para Styles ========== */
p,ul,ol /* Paragraph Style */
{
text-align: left;
text-indent: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.rvps1 /* Centered */
{
text-align: center;
}
--></style>
</head>
<body>

Hi all,




  I had the following code fragment:




  $("#subsections_tabs :text").bind("focus", function() {


    $(this).addClass("focus");


  });




  $("#subsections_tabs :text").bind("blur", function() {


    $(this).removeClass("focus");


  });




  I saw it's unnecessary to iterate the whole DOM twice, so i rewrote it like this:




  $("#subsections_tabs :text").each(function() {


    e = $(this);




    e.bind("focus", function() {


      e.addClass("focus");


    });




    e.bind("blur", function() {


      e.removeClass("focus");


    });


  });  




  However, the second code piece doesn't work as expected - there are strange additions/removals


  of classes on different elements at the same theme. I couldn't find any dependency. 




  Do you find at first sight any logical difference between the two methods which could cause troubles ?


<span class=rvts6>-- </span>


<span class=rvts6>Best regards,</span>


<span class=rvts6> Stoyan                          </span><a class=rvts7 href="mailto:fullgarbage@gmail.com">mailto:fullgarbage@gmail.com</a>


</body></html>