Detecting Class Change with JQuery

Change class name on click and detect a change in class using jQuery.

by mozfet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<div class="container">
  <div class="row">
    <p>Detect which option is selected in a materialize select</p>
    <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
  </div>
</div>

JavaScript

// on document ready
$(function() {

  // extend jquery with attribute change mutation observer plugin
  (function($) {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

    $.fn.attrchange = function(callback) {
      if (MutationObserver) {
        var options = {
          subtree: false,
          attributes: true
        }

        var observer = new MutationObserver(
          function(mutations) {
            mutations.forEach(
              function(e) {
                callback.call(e.target, e.attributeName);
              }
            )
          }
        )

        return this.each(
          function() {
            observer.observe(this, options);
          }
        )
      }
    }
  })(jQuery)
  
  // auto initialize all materialize components
  M.AutoInit()

  // find elements
  var banner = $("#banner-message")
  var button = $("button")

  // handle click
  button.on("click", () => {

    // add class
    banner.addClass("alt")
  })

  // on attribute change
  banner.attrchange(attrName => {
    if (attrName == 'class') {
      alert('class changed')
    } else if (attrName == 'id') {
      alert('id changed')
    } else {
      //OTHER ATTR CHANGED
    }
  })
})