jQuery datepicker 클래스 추가

Question

기본 TABLE 레이아웃을 변경하는 CSS가있는 웹 페이지가 있습니다.

TABLE:not(.base) { 
    border-spacing: 0; 
    border-style: none; 
    border-collapse: collapse; 
} 

TABLE:not(.base) > * > TR > * { 
    border: 0.2rem solid #88F; 
    padding: 0 0.375rem 0 0; 
    vertical-align: top; 
} 

... 

나는 JQuery와 날짜 선택기를 사용하고자하지만, 추한 뭔가 결말, 테이블 마크 업을 작성합니다. ".base"를 모든 테이블에 추가하고 싶지만 올바르게 수행 할 수있는 방법을 찾을 수 없습니다.

여기까지 제가 시도한 내용입니다.

$(document).ready(function() { 
    var formatCal = function (elt) { 
     alert(elt); 
     elt.find('TABLE').addClass('base'); 
    } 

    $('#divCal').datepicker({ 
     beforeShow: formatCal 
     , onSelect: function (val) { 
      alert(val); 
     } 
    }); 

    formatCal($('#divCal')); 
}); 

하지만 날짜를 선택할 때마다 datepicker는 다시 그려지는데 (.base 클래스가 없음).

어떻게해야합니까?

Answer 1

나는 MutationObserver를 사용할 것이다.

$(document).ready(function() { 
    var formatCal = function (elt) { 
     elt.find('TABLE').addClass('base'); 
    } 

    $('#divCal').datepicker({ 
     beforeShow: formatCal 
     , onSelect: function (val) { 
      alert(val); 
     } 
    }); 

    formatCal($('#divCal')); 

    var observer = new MutationObserver(function (records) { 
     var record = records[0]; 

     formatCal($(record.target)); 
    }); 

    // Configuration of the observer: 
    var config = { 
     attributes: false, 
     childList: true, 
     characterData: false 
    }; 

    // Pass in the target node, as well as the observer options 
    observer.observe($('#divCal > *').get(0), config); 
});