Mootools 1.2.4 delegation not working in IE8...?

Question

Hey there everybody--

So I have a listbox next to a form. When the user clicks an option in the select box, I make a request for the related data, returned in a JSON object, which gets put into the form elements. When the form is saved, the request goes thru and the listbox is rebuilt with the updated data. Since it's being rebuilt I'm trying to use delegation on the listbox's parent div for the onchange code. The trouble I'm having is with IE8 (big shock) not firing the delegated event.

I have the following HTML:

<div id="listwrapper" class="span-10 append-1 last">  
<select id="list" name="list" size="20">  
     <option value="86">Adrian Franklin</option>  
     <option value="16">Adrian McCorvey</option>  
     <option value="196">Virginia Thomas</option>  
</select>  
</div>  

and the following script to go with it:

window.addEvent('domready', function() {     
  var jsonreq = new Request.JSON();  

  $('listwrapper').addEvent('change:relay(select)', function(e) {  
    alert('this doesn't fire in IE8');  
    e.stop();  
    var status= $('statuswrapper').empty().addClass('ajax-loading');  
    jsonreq.options.url = 'de_getformdata.php';  
    jsonreq.options.method = 'post';  
    jsonreq.options.data = {'getlist':'<?php echo $getlist ?>','pkey':$('list').value};  
    jsonreq.onSuccess = function(rObj, rTxt) {  
        status.removeClass('ajax-loading');  
        for (key in rObj) {  
              status.set('html','You are currently editing '+rObj['cname']);  
              if ($chk($(key))) $(key).value = rObj[key];  
        }  
        $('lalsoaccomp-yes').set('checked',(($('naccompkey').value > 0)?'true':'false'));  
        $('lalsoaccomp-no').set('checked',(($('naccompkey').value > 0)?'false':'true'));  
    }  
    jsonreq.send();  
  });  
});  

(I took out a bit of unrelated stuff). So this all works as expected in firefox, but IE8 refuses to fire the delegated change event on the select element. If I attach the change function directly to the select, then it works just fine.

Am I missing something? Does IE8 just not like the :relay?

Sidenote: I'm very new to mootools and javascripting, etc, so if there's something that can be improved code-wise, please let me know too.. Thanks!

Answer 1

Element Delegation will not work on field elements (input/select/textarea) in IE's.