jquery - 作成した属性の値の属性変更の検出

Question

HTMLdata-select-content-valで属性を作成し、動的に情報を詰め込みました。

属性の値がいつ変更されたかを検出する方法はありますか?

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

Answer 1

DOM ノードの変更を監視する必要があります。という API がありますが、MutationObserverそのサポートは非​​常に限定されているようです。This SO answerには API のステータスへのリンクがありますが、これまでのところ IE または Opera ではサポートされていないようです。

この問題を回避する方法の 1 つは、data-select-content-val属性を変更するコードの一部で、リッスンできるイベントを送出することです。

たとえば、http: //jsbin.com/arucuc/3/editを参照して、それらを結び付ける方法を確認してください。

ここのコードは

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

Answer 2

MutationObserverを使用して、変更を含む属性の変更を追跡できますdata-*。例えば：

var foo = document.getElementById('foo');

var observer = new MutationObserver(function(mutations) {
  console.log('data-select-content-val changed');
});
observer.observe(foo, { 
  attributes: true, 
  attributeFilter: ['data-select-content-val'] });

foo.dataset.selectContentVal = 1;

 <div id='foo'></div>
 

Answer 3

属性の変更にイベント リスナーを追加する拡張機能があります。

使用法：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript"
  src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>

属性ハンドラー関数を選択した要素にバインドします

$(selector).attrchange({
    trackValues: true, /* Default to false, if set to true the event object is 
                updated with old and new value.*/
    callback: function (event) { 
        //event               - event object
        //event.attributeName - Name of the attribute modified
        //event.oldValue      - Previous value of the modified attribute
        //event.newValue      - New value of the modified attribute
        //Triggered when the selected elements attribute is added/updated/removed
    }        
});