Обнаружение изменения атрибута значения атрибута, который я сделал

Ответ 1

Вам нужно будет посмотреть изменения DOM node. Существует API под названием MutationObserver, но похоже, что поддержка для него очень ограничена. Этот ответ SO имеет ссылку на статус API, но кажется так как в IE или Opera пока нет поддержки.

Один из способов решения этой проблемы состоит в том, чтобы часть кода, который изменяет атрибут 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);
  });
});

Ответ 2

Существует это расширение, которое добавляет прослушиватель событий к изменениям атрибутов.

Использование:

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

Ответ 3

Вы можете использовать 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>