Is any event fired when jQuery.html('string') is used?

Question

I have a page with noumerous ajax calls, that append content to html. I want to save current html of the page after each of such event.

Is there any event fired in this case? May be some $(document).ready() or analog?

No, but I imagine it's not too hard to add a custom callback to `$.fn.html` — blgt, Mar 03 '15 at 14:43
http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery — Mateusz Mania, Mar 03 '15 at 14:43
Can't you just capture the HTML you need in the AJAX callbacks? — j08691, Mar 03 '15 at 14:47
...noumerous ajax calls already in project, faster is to modify $.fn.html, but it's not what I really want to do — Prosto Trader, Mar 03 '15 at 14:48

T.J. Crowder · Accepted Answer · 2015-03-03T14:55:17.213

On browsers that supported the old mutation events, yes, mutation events were raised. But mutation events have been deprecated in favor of mutation observers, which provide a non-event callback mechanism for notification which can be much more efficient because they can issue just one callback with many stacked changes that were made (rather than individual events for each change). They're supported in modern browsers except IE10 and below. On IE9 and IE10, you can use a library that shims (polyfills) mutation observers using the partial support that IE9/10 had for the old mutation events.

Here's a simple mutation observer example:

var ob = new MutationObserver(function() {
  snippet.log("Change detected");
});
ob.observe($("#container")[0], {
  childList: true,
  characterData: true,
  subtree: true
});
$("button").on("click", function() {
  $("#container").html("Updated " + new Date());
});

<div id="container">This is the container whose contents are changed.</div>
<button type="button">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

score 1 · Answer 2 · answered Mar 03 '15 at 14:59

1

Since you are adding "stuff" to your html page through ajax calls you can use .ajaxStop() instead of listening for DOM changes (mutation events).

$( document ).ajaxStop(function() {
    var bodycontent=$( "body" ).html(); //contains the html after (all) ajax calls
});

you can use .ajaxStart() similarly, however before the ajax call.

answered Mar 03 '15 at 14:59

kasper Taeymans

6,950
5
32
51

cool, that's cool bro. never heard of these functions. thanks – Prosto Trader Mar 03 '15 at 15:05

Is any event fired when jQuery.html('string') is used?

2 Answers2