爲內容更改創建一個jQuery特殊事件

我試圖創建一個jQuery特殊事件，當綁定的內容發生更改時觸發。我的方法是使用setInterval檢查內容，並檢查內容是否從上次更改過。如果您有更好的方法，請告訴我。另一個問題是，我似乎無法清除間隔。無論如何，我需要的是使用event.special檢查內容更改的最佳方法。爲內容更改創建一個jQuery特殊事件

(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 '內容變'，但不是的console.log 'contentchange觸發'。所以很顯然，回調從來沒有被觸發。

我只是使用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幫我出的成品代碼。

來源

2009-09-19 Sindre Sorhus

你不使用風險價值「爲$此聲明的任何原因？ – 2009-09-19 22:28:47

你在* real *頁面中是否有'orginalContent'的一致拼寫？ – 2009-09-19 22:29:43

固定。 – 2009-09-19 22:36:35

也看看詹姆斯similar script（聲明爲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'); 
    } 

};

無論如何，如果你需要它只是作爲事件，你的腳本是不錯的:)

來源

2009-09-19 23:05:01

我在尋找的是如何創建一個特殊的事件，就像我所做的一樣，只有一個實際的作品。你能告訴我那個嗎？ – 2009-09-20 09:24:45

我以爲你解決了它，只是把這個例子給你看看這個問題有一些不同的方法。如果你的腳本實際上還沒有工作，請告訴我。 – 2009-09-20 10:17:39

我的腳本不起作用。如果你能幫我做到這一點，那會很棒:)順便說一句，謝謝你的其他方法。 – 2009-09-20 13:21:44

我知道這個職位/問題是有點老，但這些天，我背後是imilar解決方案，我發現這一點：

$('#selector').bind('DOMNodeInserted', function(e) { 
    console.log(e.target); 
});

來源：http://naspinski.net/post/Monitoring-a-DOM-Element-for-Modification-with-jQuery.aspx

希望這有助於有人！

來源

2011-10-06 18:52:57 Matheus

DOMMutations被刪除。 – 2011-11-14 16:34:13

幾乎不值得讚揚。許多事情已被棄用，但在所有瀏覽器提供更好的解決方案之前，它們仍將被使用，並且它仍然有助於理解。（+1抵消票在這裏） – mkoistinen 2013-01-06 20:33:56

整潔！一個計時器，即使它已被棄用，很多清潔工！ – TCHdvlp 2014-09-30 15:08:40

原始問題中的完成代碼適用於我，謝謝！我只想說明我正在使用jquery 1.9.1，$ .event.handle似乎已被刪除。我改變了以下內容以使其起作用。

jQuery.event.handle.call（self，{type：'contentchange'}）;

到

jQuery.event.dispatch。來電（self，{type：'contentchange'}）;

來源

2013-07-17 13:06:23 tessa

也許你可以試試突變觀察

這裏是代碼：

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

來源

2014-08-12 05:11:32

爲內容更改創建一個jQuery特殊事件

回答

相關問題