Question

在gmail网络聊天或任何其他网络聊天中，我们如何检测到输入了一些新文本

在gmail中，这些是我执行检查元素时的属性

  <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>

我使用了以下内容，但我没有看到警告（）。由于文本被附加到一些以前的HTML，我们如何获取聊天数据进行处理

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

或者我们可以使用chat-dir属性来获取数据

EDIT 1:

我尝试使用以下内容进行gmail聊天，甚至一次我没有看到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

最简单的方法（尽管它只适用于那些支持CSS @keyframes的浏览器）是使用CSS动画为新添加的内容设置动画（不过简要地说明），然后检测animationend（或者，在Webkit中，驼峰式WebkitAnimationEnd）事件，一个简单的概念验证，具有以下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

参考文献：

CSS：
- @keyframes。
- Using CSS Animations。
jQuery的：
- click()。
- on()。

jquery在div中检测新数据

1 个答案: