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

您可以使用以下内容：

$('.bar').bind("DOMSubtreeModified",function(){
  $("#other strong").text($(this).text());
});

修改#other strong时，它会更新.bar。又名当它更新。

＆＃13;

var foo = $('.bar').text();
$("#other").append("<strong>" + foo + "</strong>");


$("button").click(function() {
  $('.bar').text("new data");
})

$('.bar').bind("DOMSubtreeModified",function(){
  $("#other strong").text($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="bar">xxx</span>

<div id="other"></div>


<button>add new content to bar</button>

＆＃13;

Answer 2

使用.on（），因为.bind（）已被弃用！

＆＃13;

// 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)
  
}

＆＃13;

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

＆＃13;

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

2 个答案: