聆聽DIV中的更改並採取相應的行動

我有一個函數可以抓取XML文檔並根據XSL文檔進行轉換。然後它將結果放入一個ID爲laneconfigdisplay的div。我想要做的是獨立於轉換邏輯，爲該div設置一個jQuery更改事件，以便我可以知道它何時發生更改，並運行一些jQuery代碼。聆聽DIV中的更改並採取相應的行動

我試過以下，但它不起作用！

$(document).ready(function() 
{ 
    $('#laneconfigdisplay').change(function() { 
     alert('woo'); 
    }); 
    //Do XML/XSL transformation here 
}); 

<!-- HTML code here --> 
<div id="laneconfigdisplay"></div>

我在做什麼錯？

來源

2010-04-26 Chris

您可以選擇創建自己的自定義事件，以便您仍然有邏輯的清晰的分離。

綁定到一個自定義事件：

$('#laneconfigdisplay').bind('contentchanged', function() { 
    // do something after the div content has changed 
    alert('woo'); 
});

在你的功能更新DIV：

// all logic for grabbing xml and updating the div here .. 
// and then send a message/event that we have updated the div 
$('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above

來源

2010-04-26 09:02:17 Shiki

工作小提琴：https：//jsfiddle.net/18n16hzz/ – AlbatrossCafe 2015-07-30 00:04:24

出於某種原因，$（'＃laneconfigdisplay'）。bind（'contentchanged'，function（）...不起作用。使用$（document）.on （'contentchanged'，'#laneconfigdisplay'，function（），正如@AlbatrossCafe所建議的那樣。 – 2017-05-09 18:55:04

change事件限於input，textarea &和select。

查看http://api.jquery.com/change/瞭解更多信息。

來源

2010-04-26 08:54:46 kim3er

啊......呃。我如何監聽div內的變化然後...或者是不可能的？ – Chris 2010-04-26 08:58:06

它是你必須手動執行，請檢查我的awnser – meo 2010-04-26 09:01:30

+1以解釋爲什麼change（）不適用於Div。 – 8bitjunkie 2014-01-16 16:24:05

http://api.jquery.com/change/

變化不會只對輸入表格元件工作。

你可以只觸發功能的XML/XSL轉換後或使聽者：

var html = $('#laneconfigdisplay').html() 
setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed...

來源

2010-04-26 08:59:46 meo

爲什麼你會每10秒檢查一次事件實際發生變化時是否可以發起事件？ – dmackerman 2011-11-17 21:40:10

你怎麼知道，如果事情發生變化，如果它不觸發任何事件？我根據問題中提供的信息給出了答案。 – meo 2011-11-17 22:39:03

不斷輪詢DOM不是一個好主意。只有在發生變化時以及發生的情況下才會報告變化，例如@ Shiki的「綁定」示例。 – markedup 2012-06-08 14:50:42

如果可能的話，你可以在div更改爲文本區域，並使用.change（）。

另一種解決方案可以使用隱藏的textarea，並在更新div時同時更新textarea。然後在隱藏的textarea上使用.change（）。

您還可以使用http://www.jacklmoore.com/autosize/使文本區域更像一個div。

<style> 
.hidden{ 
display:none 
} 
</style> 

<textarea class="hidden" rows="4" cols="50"> 

</textarea> 


$("#hiddentextarea").change(function() { 

alert('Textarea changed'); 

})

更新：它看起來像textarea的具有更新後的散焦，以獲得更多信息：How do I set up a listener in jQuery/javascript to monitor a if a value in the textbox has changed?

來源

2014-03-15 15:18:21 galengodis

有一位優秀的jquery plugin, LiveQuery, that does just this。

實時查詢利用jQuery選擇器的強大功能，通過綁定事件或自動魔法地爲匹配元素啓動回調，即使在頁面已被加載和DOM更新之後。

例如，您可以使用以下代碼將點擊事件綁定到所有A標籤，甚至可以通過AJAX添加任何A標籤。

$('a').livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
});

一旦你添加新的A標籤文檔，實況查詢將綁定click事件，並沒有什麼別的需要被調用或完成。

這裏是一個working example of its magic ...

來源

2016-09-21 13:37:43

試試這個

$('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){ 
      // your code; 
     });

不要使用此。這可能會導致頁面崩潰。

$('mydiv').bind("DOMSubtreeModified",function(){ 
    alert('changed'); 
});

來源

2017-04-27 10:22:33

雖然事件DOMSubtreeModified已過時，其截至目前的工作，所以對於任何臨時的項目，你可以使用它作爲以下。

$("body").on('DOMSubtreeModified', "#mydiv", function() { 
    alert('changed'); 
});

從長遠來看，雖然，你將不得不使用MutationObserver API。

來源

2017-07-11 20:48:08

聆聽DIV中的更改並採取相應的行動

回答

相關問題