如何使用JQuery从HTML元素中获取实时数据?

Element

元素

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

contain value and it's updated by Ajax.

包含值，并由Ajax更新。

I have successfully get this xxx data to variable via JQuery with this script

我已经通过这个脚本成功地将这个xxx数据通过JQuery得到了变量。

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

to append it to #other place in page, and it's works fine but... How to get live data (updated by Ajax) from this .bar element?

将它附加到页面的#other位置，它可以工作，但是……如何从这个.bar元素获取实时数据(由Ajax更新)?

2 个解决方案

#1

Use .on() as .bind() is deprecated!

使用。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>

#2

You can use the following:

你可使用以下资料:

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

It will update #other strong when .bar is modified. aka when its updated.

当.bar被修改时，它将更新#other strong。也就是当其更新。

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());
});

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

#1