Detect element content changes with jQuery

by

I know this post is a year old, but I’d like to provide a different solution approach to those who have a similar issue:

  1. The jQuery change event is used only on user input fields because if anything else is manipulated (e.g., a div), that manipulation is coming from code. So, find where the manipulation occurs, and then add whatever you need to there.

  2. But if that’s not possible for any reason (you’re using a complicated plugin or can’t find any “callback” possibilities) then the jQuery approach I’d suggest is:

    a. For simple DOM manipulation, use jQuery chaining and traversing, $("#content").html('something').end().find(whatever)....

    b. If you’d like to do something else, employ jQuery’s bind with custom event and triggerHandler

    $("#content").html('something').triggerHandler('customAction');

$('#content').unbind().bind('customAction', function(event, data) {
   //Custom-action
});

Here’s a link to jQuery trigger handler: http://api.jquery.com/triggerHandler/

More Related Contents:

  1. .prop() vs .attr()
  2. How do I select text nodes with jQuery?
  3. Check if an image is loaded (no errors) with jQuery
  4. How to hide a in a menu with CSS?
  5. Firing event on DOM attribute change
  6. Find DOM element by ID when ID contains square brackets?
  7. How to expose IFrame’s DOM using jQuery?
  8. Finding line-wraps
  9. Why are duplicate ID values not allowed in HTML?
  10. jQuery DOM changes not appearing in view source
  11. Check if option is selected with jQuery, if not select a default
  12. Is there a DOM event that fires when an HTML select element is closed?
  13. AngularJS: How to run additional code after AngularJS has rendered a template?
  14. How to detect when an iframe has already been loaded
  15. Is there any “on DOM change” event? [duplicate]
  16. change html text from link with jquery
  17. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  18. Converting a recursive function into an asynchronous CPS implementation (javascript)
  19. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  20. DOM Mutation event in JQuery or vanilla Javascript
  21. Convert String to XML Document in JavaScript
  22. How to set DOM element as first child?
  23. JQuery – animate moving DOM element to new parent?
  24. Open new window without focus on it [duplicate]
  25. How can I remove wrapper (parent element) without removing the child?
  26. window.getSelection return html [duplicate]
  27. Unloading/Removing content from an iFrame
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment