javascript - 자바스크립트 - jquery on 이벤트



내용이 변경된 jQuery 특별 이벤트 만들기 (3)

또한 제임스 비슷한 스크립트 (jquery 개체 메서드 및 이벤트로 선언으로보세요)

jQuery.fn.watch = function( id, fn ) {

    return this.each(function(){

        var self = this;

        var oldVal = self[id];
        $(self).data(
            'watch_timer',
            setInterval(function(){
                if (self[id] !== oldVal) {
                    fn.call(self, id, oldVal, self[id]);
                    oldVal = self[id];
                }
            }, 100)
        );

    });

    return self;
};

jQuery.fn.unwatch = function( id ) {

    return this.each(function(){
        clearInterval( $(this).data('watch_timer') );
    });

};

특별 행사 만들기

jQuery.fn.valuechange = function(fn) {
    return this.bind('valuechange', fn);
};

jQuery.event.special.valuechange = {

    setup: function() {

        jQuery(this).watch('value', function(){
            jQuery.event.handle.call(this, {type:'valuechange'});
        });

    },

    teardown: function() {
        jQuery(this).unwatch('value');
    }

};

어쨌든, 이벤트로만 필요하다면, 스크립트는 훌륭합니다 :)

바인딩 된 내용이 변경 될 때 트리거하는 jQuery 특수 이벤트를 만들려고합니다. 내 방법은 setInterval을 사용하여 내용을 검사하고 내용이 지난 시간에서 변경되었는지 확인하는 것입니다. 그렇게하는 더 좋은 방법이 있다면 알려주세요. 또 다른 문제는 그 간격을 없애지 못하는 것입니다. 어쨌든, 내가 필요한 것은 event.special을 사용하여 컨텐츠 변경 사항을 확인하는 가장 좋은 방법입니다.

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(data, namespaces) {
            var $this = $(this);
            var $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    console.log('content changed');
                    $originalContent = $this.text();
                    jQuery.event.special.contentchange.handler();
                }
            },500);
        },
        teardown: function(namespaces){
            clearInterval(interval);
        },
        handler: function(namespaces) {
            jQuery.event.handle.apply(this, arguments)
        }
    };

})();

그리고 이것을 다음과 같이 묶으십시오 :

$('#container').bind('contentchange', function() {
        console.log('contentchange triggered');
});

console.log의 'content changed'는 표시되지만 console.log의 'contentchange triggered'는 표시되지 않습니다. 콜백이 실행되지 않는다는 것은 명백합니다.

난 그냥 Firebug를 사용하여 내용을 변경하고 이벤트를 실행하여 테스트 해 봅니다.

최신 정보
내가 충분히 명확하게 만든 것 같지 않아, 내 코드가 실제로 작동하지 않습니다. 내가 잘못하고있는 것을 찾고 있습니다.


관심있는 모든 사람들을위한 완성 된 코드가 있습니다.

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(){
            var self = this,
            $this = $(this),
            $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    $originalContent = $this.text();
                    jQuery.event.handle.call(self, {type:'contentchange'});
                }
            },100);
        },
        teardown: function(){
            clearInterval(interval);
        }
    };

})();

Mushex 덕분에 나를 도왔습니다.


Answer #1

어쩌면 당신은 Mutation Observer를 시도 할 수 있습니다.

코드는 다음과 같습니다.

mainArea = document.querySelector("#main_area");
MutationObserver = window.MutationObserver;
DocumentObserver = new MutationObserver(function() {
       //what you want to run
});

DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true};

DocumentObserver.observe(mainArea, DocumentObserverConfig);





intervals