title: attach event in loop, javascript
body: <p>I know this is a "classic" and I already tried to read different explanatory articles on this subject, but I still manage to do it wrong somehow. I am talking about adding event handlers and functions in a javascript loop.</p>
  
  <p>Here is my code with problems (it's a suggest-box / auto complete)</p>
  
  <pre><code>function autoCompleteCB(results) {
  document.getElementById('autocom').innerHTML = '';
  if (results.length == 0) {
      document.getElementById('autocom').style.display = 'none';
  } else {
      document.getElementById('autocom').style.display = 'block';
      var divholders = [];
      for (var i = 0; i &lt; results.length; i++) {
          divholders[i] = document.createElement('div');
          divholders[i].style.width = '350px';
          var divrestext = document.createElement('div');
          divrestext.className = 'autocom0';
          divrestext.innerHTML = results[i][0];
          divholders[i].appendChild(divrestext);
          var divrestype = document.createElement('div');
          divrestype.className = 'autocom1' + results[i][1];
          divrestype.innerHTML = results[i][1];
          divholders[i].appendChild(divrestype);
          divholders[i].attachEvent('onmouseover', (function(i) { return function() { divholders[i].style.backgroundColor='#266699'; }; })(i));
          divholders[i].attachEvent('onmouseout', (function (i) { return function() { divholders[i].style.backgroundColor = '#F5F5F5'; }; })(i));
          document.getElementById('autocom').appendChild(divholders[i]);
      }
  }
  }
  </code></pre>
  
  <p>It is (of course) the attachevent lines that do not work. This part of javascript is so weird/tricky :) Can a kind expert help me fix those two lines?</p>
  
  <hr>
  
  <p>This is a half-way fix (I think(:</p>
  
  <pre><code>function bindEvent(element, type, listener) {
  if (element.addEventListener) {
      element.addEventListener(type, listener, false);
  } else if (element.attachEvent) {
      element.attachEvent('on' + type, listener);
  }
  }
  function autoCompleteCB(results) {
  document.getElementById('autocom').innerHTML = '';
  if (results.length == 0) {
      document.getElementById('autocom').style.display = 'none';
  } else {
      document.getElementById('autocom').style.display = 'block';
      var divholders = [];
      for (var i = 0; i &lt; results.length; i++) {
          divholders[i] = document.createElement('div');
          divholders[i].style.width = '350px';
          var divrestext = document.createElement('div');
          divrestext.className = 'autocom0';
          divrestext.innerHTML = results[i][0];
          divholders[i].appendChild(divrestext);
          var divrestype = document.createElement('div');
          divrestype.className = 'autocom1' + results[i][1];
          divrestype.innerHTML = results[i][1];
          // BIND THE EVENTS
          divholders[i].appendChild(divrestype);
          document.getElementById('autocom').appendChild(divholders[i]);
      }
  }
  }
  </code></pre>
  
  <p>It looks like this now, but still no "action"</p>
  
  <pre><code>function autoComplete() {
  var ss = document.getElementById('txbkeyword').value;
  if (ss.length &gt; 0) { CSearch.SearchAutoComplete(ss, 3, autoCompleteCB); }
  else { document.getElementById('autocom').style.display = 'none'; }
  
  }
  function bindEvent(element, type, listener) {
  if (element.addEventListener) {
      element.addEventListener(type, listener, false);
  } else if (element.attachEvent) {
      element.attachEvent('on' + type, listener);
  }
  }
  function autoCompleteCB(results) {
  document.getElementById('autocom').innerHTML = '';
  if (results.length == 0) {
      document.getElementById('autocom').style.display = 'none';
  } else {
      document.getElementById('autocom').style.display = 'block';
      var divholders = [];
      for (var i = 0; i &lt; results.length; i++) {
          divholders[i] = document.createElement('div');
          divholders[i].style.width = '350px';
          var divrestext = document.createElement('div');
          divrestext.className = 'autocom0';
          divrestext.innerHTML = results[i][0];
          divholders[i].appendChild(divrestext);
          var divrestype = document.createElement('div');
          divrestype.className = 'autocom1' + results[i][1];
          divrestype.innerHTML = results[i][1];
          (function (i) {
              bindEvent(divholders[i], 'mouseover', function () {
                  divholders[i].style.backgroundColor = '#266699';
              });
              bindEvent(divholders[i], 'mouseout', function () {
                  divholders[i].style.backgroundColor = '#F5F5F5';
              });
          })(i);
          divholders[i].appendChild(divrestype);
          document.getElementById('autocom').appendChild(divholders[i]);
      }
  }
  }
  </code></pre>