jquery detect new data in a div

Question

In gmail web chat or any other web chat how can we detect that some new text is entered

In gmail these are the attributes when i do an inspect element

  <div chat-dir="f" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
  </div>

  <div chat-dir="t" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
 </div>

I have used the following but i do not see the alert().Since the text is appended to some previously html how can we get the chat data for processing

$("div.km").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

or can we use chat-dir attribute to get the data

EDIT 1:

I tried the following for gmail chat and even once i didnt see the alert()

$(".AD").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});
$("div.kk").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

$('div.kk').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
    alert("heree")
});


$(document).ready(function() {
  alert("hello world in ready");  
    $('div.no').on('webkitAnimationEnd animationend', 'div', function(e){
        console.log(e.target.tagName.toLowerCase() + ' added!');
        alert("heree")
});
$('div.no').change(function() {
    alert('Handler for .change() called.');
});
$('div.kk').change(function() {
   alert('Handler for .change() called.');
});
$('.kk').change(function() {
  alert('Handler for .change() called.');
});
alert($('.kk').val());
$('km').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
    alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
    alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
});

Answer 1

The easiest way (albeit it only works on those browsers that support CSS @keyframes) is to use a CSS animation to animate (however briefly) the newly-added content, and detect the animationend (or, in Webkit, the camel-cased WebkitAnimationEnd) event, a simple proof-of-concept, with the following HTML:

<button id="add">Add more content</button>
<div id="holder"></div>

jQuery:

$('#holder').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
});

$('#add').click(function(){
    var addTo = $('#holder');
    $('<div />', {text: addTo.children().length})
    .appendTo(addTo);
});

CSS:

@-webkit-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#holder div {
    /* Firefox */
    -moz-animation: newContentAdded;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.1s;
    /* Chrome, Chromium, Webkit (future-opera?) */
    -webkit-animation: newContentAdded;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.1s;
}

JS Fiddle demo.

References:

• CSS:
  • @keyframes.
  • Using CSS Animations.
• jQuery:
  • click().
  • on().