Listen to changes within a DIV and act accordingly

Question

I have a function that grabs an XML document and transforms it according to an XSL document   It then places the result into a div with the id laneconfigdisplay   What I want to do is  separate to the transformation logic  setup a jQuery change event for that div so I can tell when it has changed  and run some jQuery code   I have tried the following  but it does not work     document  ready function             laneconfigdisplay   change function             alert  woo                  Do XML   XSL transformation here       lt  -- HTML code here -- gt   lt div id  laneconfigdisplay  gt  lt  div gt    What am I doing wrong

User · Answer

If possible you can change the div to an textarea and use .change().

Another solution could be use a hidden textarea and update the textarea same time as you update the div. Then use .change() on the hidden textarea.

You can also use http://www.jacklmoore.com/autosize/ to make the text area act more like a div.

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

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

</textarea>


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

alert('Textarea changed');

})

Update: It seems like textarea has to be defocused after updated, for more info: How do I set up a listener in jQuery/javascript to monitor a if a value in the textbox has changed?

User · Answer

You can opt to create your own custom events so you ll still have a clear separation of logic   Bind to a custom event       laneconfigdisplay   bind  contentchanged   function          do something after the div content has changed   alert  woo          In your function that updates the 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

User · Answer

http   api jquery com change   change does only work on input form elements   you could just trigger a function after your XML   XSL transformation or make a listener   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

User · Answer

There is an excellent jquery plugin  LiveQuery  that does just this   Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically  even after the page has been loaded and the DOM updated  For example you could use the following code to bind a click event to all A tags  even any A tags you might add via AJAX      a   livequery  click   function event         alert  clicked         return false          Once you add new A tags to your document  Live Query will bind the click event and there is nothing else that needs to be called or done   Here is a working example of its magic

User · Answer

Though the event DOMSubtreeModified is deprecated  its working as of now  so for any makeshift projects you can use it as following       body   on  DOMSubtreeModified     mydiv   function         alert  changed          In the long term though  you ll have to use the MutationObserver API

User · Answer

Try this       D25  E37  E31  F37  E16  E40  F16  F40  E41  F41   bind  DOMNodeInserted DOMNodeRemoved  function                 your code               Do not use this  This may crash the page      mydiv   bind  DOMSubtreeModified  function      alert  changed

User · Answer

The change event is limited to input  textarea  amp  and select   See http   api jquery com change  for more information

[jquery] Listen to changes within a DIV and act accordingly

Examples related to jquery