输入元素未触发更改事件

Question

The following marionette view contains a table that is editable by double clicking a cell. To accomplish that I used slickgrid. It works fine in chrome, but in IE9 this view never notices the change event("change .slick-cell.l1 input"). This is unless you double click the cell to edit make the change then click the save button. In chrome I can double click the cell make the change and hit enter or click anywhere outside the cell and the change occurs.

DataContentView = Marionette.ItemView.extend({
    className: "ui-widget-content grid-container",

    events: {
        "change .slick-cell.l0 input": "changeDataKey",
        "change .slick-cell.l1 input": "changeDataValue",
        "click .ui-icon-trash": "removeData"
    },

    changeDataValue: function(event){                
        var target = $(event.target),
            key = target.closest(".slick-row").find(".l0").text(),
            value = target.val();

        this.model.set(key, value, {silent:true});
    }
}

Answer 1

"input .slick-cell.l0 input": "changeDataKey",
// and similar to others

try bind 'input' event if your IE version is >=9 or 'propertychange' event. It can help.

Answer 2

Using different events did seem to work for IE9. I found what I think maybe a better solution. Intially I used the keyup event to call changeDataValue function. This worked well except in cases where the enter key or the escape key was pressed. Slickgrid seems to stop propagation of those key events. To get around this slick grid has its own set of events. So I found the right event onCellChange , here is the code I used:

this.grid = new Slick.Grid();       

this.grid.onCellChange.subscribe(function(e,args){
    if(args.cell === 0){//cell in first column changed
        this.changeDataKey(args.item.key, args.item.val);
    }
    else if(args.cell === 1){
        this.changeDataValue(args.item.key, args.item.val);
    }
});