change event on a table fails in IE

Question

I am using jQuery to capture a change event on a table. The table has many rows and each row has a few inputs boxes and a checkbox. To do this, I am using event delegation. I am capturing any changes at the tbody level. This is the code below

$j('#orderItems tbody').change(function(event){
     var target = $j(event.target);
            var nodeName = $j(target).attr('nodeName').toLowerCase();
            if(nodeName == 'input'){
                if($j(target).hasClass('partnum')){
                    var val = $j(target).attr('value');
                    dsOrder.getItem(target);
                    dsOrder.updateActiveIndex(target);
                }
                if($j(target).hasClass('qty')){
                    var val = $j(target).attr('value');
                    dsOrder.updateQty(target);
                    dsOrder.updateActiveIndex(target);
                }
                if($j(target).hasClass('unitprice')){
                    var val = $j(target).attr('value');
                    dsOrder.updatePrice(target);
                    dsOrder.updateActiveIndex(target);
                }
            }
        })

This code works fine in Firefox, but the change event is not captured in IE. I would like to approach this solution using event delegation rather than attaching each event onto each input element. I also would like to avoid targeting each element using jQuery as the table rows are built dynamically and unbinding/binding events seems a little messy (just my opinion)

Any ideas on how to get this to work?

Answer 1

You're actually using bubbling to pick up the event on the ancestor element, not capturing (which IE doesn't support and jQuery doesn't use). Unfortunately whilst onchange bubbles in the DOM spec it does not in IE.

I think you will just have to target the inputs. (Unfortunately the ‘live’ function doesn't support onchange, either.)