$( "#hover"+item ) does not work but $( "#hover0" ) works

Question

I have a javascript code as follow:

$( "#hover0" )
    .mouseenter(function() {
        $( "#hover0" ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
        $( "#hover0" ).removeAttr();
    });

which works perfectly but as soon as I change it to the following it does not work:

var item=0;
$( "#hover"+item )
    .mouseenter(function() {
        $( "#hover"+item  ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
        $( "#hover"+item  ).removeAttr();
    });

what is the problem?Can anyone help me how I can do it like the second approach?(Actually the real scenario is a for loop with item changing as each loop passes)

Update:

Here is my loop:

for (var item in jsresult) {

    if (jsresult[item] != "null") {

    $('#tweetWrapper')
        .append("<div class='tweetCon' id='hover"+item+"' >" +
                "<div class='tweetimgcon' ><img alt='' height='50px' src='"+jsresult[item].url+"'></div>" +
                "<div class='tweetcontitle' >"+jsresult[item].name+"</div>" +
                "<div class='tweetcondate' >"+jsresult[item].date+"</div>" +
                "<div class='tweetconcontent' '>"+jsresult[item].text+"</div>" +
                "</div><div class='ttest' style='float:left;height:300px;width:100%;display:none;'></div>");

    $("#hover0")
      .mouseenter(function() {
        $( "#hover0" ).attr("style","background-color:#e1e8ed;");
      })
      .mouseleave(function() {
        $( "#hover0" ).removeAttr();
      });
    }
}

`the real scenario is a for loop` <- and therein lies the problem, it's not the number that is the issue, it's the loop. — adeneo, Aug 05 '14 at 20:50
BTW: dont use `style` Directly, use `css()` http://api.jquery.com/css/ — meni181818, Aug 05 '14 at 20:52
@meni181818 Thanks but if it was the style proble it should not have worked with $( "#hover0" ) — HMdeveloper, Aug 05 '14 at 20:54
FYI: You should also not have quotes around null. You are checking for the string "null" rather than a null value. — Derek, Aug 05 '14 at 20:57
How does it not work? What results are you seeing? I'd recommend logging `item` to the console to see if you are getting what you expect. — Derek, Aug 05 '14 at 20:58
See [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/q/750486/218196). — Felix Kling, Aug 05 '14 at 21:03

score 4 · Accepted Answer · answered Aug 05 '14 at 20:59

Those handlers will always use the last-known value of item, not the value that it had when you set them up.

Better to move the handler code into a setup function, and call that - its local variable will always have the right value.

function addHandlers(item) {
  $( "#hover"+item )
    .mouseenter(function() {
      $( "#hover"+item  ).attr("style","background-color:#e1e8ed;");
    })
    .mouseleave(function() {
      $( "#hover"+item  ).removeAttr('style');
    });
}

// called as...
//
for(var item in jsresult)
{     
  if (jsresult[item]!="null")
  {
    // wrappers, etc., then...
    //

    addHandlers( item );
  }
}

$( "#hover"+item ) does not work but $( "#hover0" ) works

1 Answers1