Help: addEventListener() for IE

Code:

if (document.getElementsByClassName == undefined) {
  document.getElementsByClassName = function(className)
  {
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
    var allElements = document.getElementsByTagName("*");
    var results = [];

    var element; 
    for (var i = 0; (element = allElements[i]) != null; i++) {
      var elementClass = element.className;
      if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) {
        results.push(element);
      }
      return results;
    }
  }
}

function sortable() {
  var sortable = document.getElementsByClassName('sortable');
  for(var i in sortable) {
    element = sortable[i];
    if (element.id != undefined) {
      var sort_id = element.id;
      document.getElementById(sort_id).addEventListener('click', sort, false);
    }
  }
}

function sort() {
  if (last_sorted == this.id + "desc") {
    last_sorted = this.id + "asc";
    order = this.id + " asc";
    if (search_temp != undefined) {
      my_table(limit, offset, order, search_temp);
    } else {
      my_table(limit, offset, order, filter);
    }
  } else {
    last_sorted = this.id + "desc";
    order = this.id + " desc";
    if (search_temp != undefined) {
      my_table(limit, offset, order, search_temp);
    } else {
      my_table(limit, offset, order, filter);
    }
  }
}

This is a wee bit of code that is part of my javascript for getting a table from jsonp data. This works on Safari, Opera, Chrome, Firefox and mobile Safari.

My problem is i can't get this working on IE 8 which is the minimum supported browser i need to support, while i am aware jQuery can do this for my own 'joy' just now i am doing this with pure JavaScript which has proved clean sailing in getting the jsonp cross domain, searching, paginating etc.

Any help would be greatly appreciated, i believe attachEvent() is the way to go but it does not support 'this'.

 

I've tried adding.

Code:

Element.prototype.addAnEvent = function(name, funct){
   if(this.addEventListener) // Works in NORMAL browsers...
   {
     this.addEventListener(name,funct, false);
   }
   else if(this.attachEvent){
     var _this = this;
     this.attachEvent("on"+name, function(){funct.apply(_this);});
     //where the value of "this" in funct should point to "element"
   }
};

which changes sort() to the following

Code:

function sort() {
  alert('ho');
  if (last_sorted == this.id + "desc") {
    last_sorted = this.id + "asc";
    order = this.id + " asc";
    if (search_temp != undefined) {
      my_table(limit, offset, order, search_temp);
    } else {
      my_table(limit, offset, order, filter);
    }
  } else {
    last_sorted = this.id + "desc";
    order = this.id + " desc";
    if (search_temp != undefined) {
      my_table(limit, offset, order, search_temp);
    } else {
      my_table(limit, offset, order, filter);
    }
  }
}

Now from my research this should work however it seems to work only on the modern browsers, IE8 does not register the clicks so the alert i have set up is never called.

 

After a little more fishing i believe it may be because document.getElementById is not working on IE8 when the element has been written to the dom by using document.getElementById(name).innerHTML. So this is perhaps what i need to fix.

 

Lots of jiggery pockery and i got this working, at least down to IE8, i can't find any older versions of IE to test with.