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">
    <br>
    <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>Detect which option is selected in 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, e.target);
              }
            )
          }
        )

        return this.each(
          function() {
            observer.observe(this, options);
          }
        )
      }
    }
  })(jQuery)

  // auto initialize all materialize components
  M.AutoInit()
  
  // find the initial selected option
  const initial = $('li.selected').find('span').text()
  console.log('initial selected item is:', initial)

  // on attribute change
  $('li').attrchange((attrName, target) => {
    // console.log('attrchange', attrName, target)
    if (attrName == 'class') {      
      const li = $(target)
      if (li.hasClass('selected')) {
        const text = li.find('span').text()
        
        console.log('selected item is:', text)
      }
    }
  })
})