입력 요소에서 변경 이벤트가 트리거되지 않았습니다.

Question

다음의 마리오 네트 뷰에는 셀을 두 번 클릭하여 편집 할 수있는 테이블이 포함되어 있습니다. 그것을 성취하기 위해 나는 슬릭 그리드를 사용했다. 그것은 크롬에서 잘 작동하지만, IE9에서이 뷰는 변경 이벤트 (".slick-cell.l1 입력 변경")를 결코 알지 못합니다. 편집 할 셀을 두 번 클릭하지 않고 변경을 한 다음 저장 버튼을 클릭하지 않는 한입니다. 크롬에서는 셀을 두 번 클릭하여 변경하고 셀 외부의 아무 곳이나 클릭하여 변경을 할 수 있습니다.

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

다른 이벤트를 사용하면 IE9에서 작동하는 것으로 보입니다. 나는 아마도 내가 더 좋은 해결책이라고 생각하는 것을 발견했다. 처음에는 changeDataValue 함수를 호출하기 위해 keyup 이벤트를 사용했습니다. 엔터 키나 이스케이프 키를 누른 경우를 제외하고는 잘 작동했습니다. 슬릭 그리드 (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); 
    } 
}); 

Answer 2

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

시도 바인드 '입력'이벤트 당신의 IE 버전이> = 9 '의 PropertyChange'이벤트됩니다. 도움이 될 수 있습니다.