输入元素未触发更改事件

Question

下面的木偶视图包含一个可通过双击单元格进行编辑的表。 为此，我使用了slickgrid。 它在chrome中工作正常，但是在IE9中，此视图从不注意到更改事件（“ change .slick-cell.l1 input”）。 除非您双击要编辑的单元格进行更改，然后单击“保存”按钮。 在chrome中，我可以双击该单元格进行更改，然后按Enter键或单击该单元格外部的任意位置即可进行更改。

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

如果您的IE版本> = 9或“ propertychange”事件，请尝试绑定“ input”事件。 它可以提供帮助。

Answer 2

使用不同的事件似乎确实适用于IE9。 我发现我认为可能是更好的解决方案。 最初，我使用keyup事件来调用changeDataValue函数。 除按下回车键或退出键的情况外，此方法效果很好。 Slickgrid似乎阻止了这些关键事件的传播。 为了避开这个光滑的网格，它有自己的事件集。 所以我找到了正确的事件onCellChange ，这是我使用的代码：

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);
    }
});