HTML

Question

我写了以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON On-change Sample</title>
</head>
<body>
    <style>
      span {
        font-weight: bold;
      }
    </style>

    <div id="placeholder"></div>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function(){ 
//DOCUMENT READY FUNCTION
    loadData();
}); 

    function loadData() {
  $.getJSON('data.json', function(data) {
        var output="<span>";

            output+= data.response.items[0].state;
            output+= data.response.items[1].state;

        output+="</span>";
        document.getElementById("placeholder").innerHTML=output;

                var initial = (data.response.items[0].state);
                var initialSecond = (data.response.items[1].state);

        if (initial>0 || initialSecond>0) {
        document.title= 'State 1:' + " " + initial + " " + "and" + " " + "State 2:" + " " + initialSecond;
}
               $('#placeholder').change(function() {
                alert("Changed!");
                });

  });
  setTimeout("loadData()",800);
}
    </script>
</body>
</html>

它的目的是简单地每800毫秒更新一次并更新页面上的结果。它有效。

问题是，无论何时两个项目的状态发生变化，我都想要一个简单的警报，说明哪个产品ID从哪个状态变为哪个状态。

我甚至无法首先获得警报，甚至没有提及告诉它哪个产品发生了变化，从什么状态变为什么状态。

为什么我的警报不起作用？ jQuery文档声明这......这应该是有用的。

编辑：

在下面的blunderboy解决方案的帮助下解决。

以下是它最终的结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON On-change Sample</title>
</head>
<body>
    <style>
      span {
        font-weight: bold;
      }
      #placeholderOne, #placeholderTwo {
        font-weight: bold; 
        margin-bottom: 15px; 
        text-align: center; 
        color: #b20000;
      }
      h3, h4 { 
        margin-bottom: 15px; 
        text-align: center;
      }
    </style>
    <h3>The numbers represent the state of the two products. Get the alert and the update via AJAX by changing the state data in the data.json file and saving it.</h3>
    <h4> Product 1: </h4>
    <div id="placeholderOne"></div>
    <h4> Product 2: </h4>
    <div id="placeholderTwo"></div>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function(){ 
//DOCUMENT READY FUNCTION
    loadData();
}); 

function loadData() {
  $.getJSON('data.json', function(data) {
    var output = data.response.items[0].state;
    var outputTwo = data.response.items[1].state;

    // Cache the initialState before putting updated value in it
    var initialStateOne = document.getElementById("placeholderOne").innerHTML;
    var initialStateTwo = document.getElementById("placeholderTwo").innerHTML;

    document.getElementById("placeholderOne").innerHTML=output;
    document.getElementById("placeholderTwo").innerHTML=outputTwo;
    var initial = (data.response.items[0].state);
    var initialSecond = (data.response.items[1].state);

    if (initial > 0 || initialSecond > 0) {
      document.title= 'State 1:' + " " + initial + " " + "and" + " " + "State 2:" + " " + initialSecond;
    }

    if (initialStateOne != output && initialStateOne > 0) {
      alert("Product ID " + data.response.items[0].product_id + " state changed from " + initialStateOne + " to " + data.response.items[0].state);
          if (initialStateTwo != outputTwo && initialStateTwo > 0) {
      alert("Product ID " + data.response.items[1].product_id + " state changed from " + initialStateTwo + " to " + data.response.items[1].state);
    }
    };


});
  setTimeout("loadData()",800);
}
    </script>
</body>
</html>

Answer 1

结帐jQuery Change Event API。它清楚地说改变事件仅限于textarea，选择和输入。这就是为什么你不能让这个工作。

相反，您可以手动比较上一个值和最新值，并提醒您更改事件。

您的代码如下所示：

function loadData() {
  $.getJSON('data.json', function(data) {
    var output="<span>";
        output+= data.response.items[0].state;
        output+= data.response.items[1].state;
        output+="</span>";

    // Cache the initialState before putting updated value in it
    var initialState = document.getElementById("placeholder").innerHTML;

    document.getElementById("placeholder").innerHTML=output;
    var initial = (data.response.items[0].state);
    var initialSecond = (data.response.items[1].state);

    if (initial > 0 || initialSecond > 0) {
      document.title= 'State 1:' + " " + initial + " " + "and" + " " + "State 2:" + " " + initialSecond;
    }

    if (initialState != output) { //See this is the only change
      alert("Changed!");
    };
});
setTimeout("loadData()",800);

Answer 2

以下是您问题的另一个答案。您可以使用DOM Mutation Event: DOMSubtreeModified来确定元素子树中的更改。这是JSbin Demo

HTML

<div id='a'></div>

JS

var $a = $('#a');
$a.on('DOMSubtreeModified', function() {
  alert('Changed');
});

$a.html('This is test1');
$a.html('This is test2');

PS：请注意，当您更改此div中的任何元素时，此方法也将调用事件处理程序。因此，您最好在不再需要时删除此事件处理程序，或者优雅地处理此类情况。

数据更改时发出警报 - JSON和AJAX以及jQuery

2 个答案:

HTML

JS