javascript - 如何通过 JQuery 从 HTML 元素获取实时数据？

Question

元素

<span class="bar">xxx</span>

包含值并由 Ajax 更新。

我已经使用此脚本通过 JQuery 成功地将此 xxx 数据获取到变量

var foo = $('.bar').html();
$("#other").append("<strong>" + foo  + "</strong>");
// alert(foo) <- for testing

将它附加到页面中的#other 位置，它工作正常但是......如何从此 .bar 元素获取实时数据(由 Ajax 更新)？

Answer 1

使用 .on() 作为 .bind() 已弃用!

// to simulate ajax changing contents
$('.ajax').on('keyup', function(){
  $('.first_div').html($(this).val())
})

// your answer
updater();

$('.first_div').on('DOMSubtreeModified', updater)

function updater(){

  var data = $('.first_div').html();
  
  // your logic here
  data = '[' + data + ']'

  // display result
  $('.second_div').html(data)
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<pre>
Enter new content:
<input class="ajax" value="initial">

This is what ajax updates:
<div class="first_div">initial</div>

This is updated by DOMSubtreeModified event:
<div class="second_div"></div>

</pre>