检测我所做的属性值的属性更改

Question

我在HTML中创建了一个属性，该属性data-select-content-val动态地填充了信息。

有没有一种方法可以检测属性值何时更改？

$(document).on("change", "div[data-select-content-val]", function(){
    alert("BOOP!");
});

Answer 1

您将必须注意DOM节点的更改。有一个名为的APIMutationObserver，但似乎对其的支持非常有限。这样的答案有一个指向API状态的链接，但是到目前为止，似乎在IE或Opera中都不支持它。

解决该问题的一种方法是让修改data-select-content-val属性的代码部分分派一个您可以侦听的事件。

这里的代码是

$(function() {  
  // Here you register for the event and do whatever you need to do.
  $(document).on('data-attribute-changed', function() {
    var data = $('#contains-data').data('mydata');
    alert('Data changed to: ' + data);
  });

  $('#button').click(function() {
    $('#contains-data').data('mydata', 'foo');
    // Whenever you change the attribute you will user the .trigger
    // method. The name of the event is arbitrary
    $(document).trigger('data-attribute-changed');
  });

   $('#getbutton').click(function() {
    var data = $('#contains-data').data('mydata');
    alert('Data is: ' + data);
  });
});