JSFiddle - React, Tailwind, and code Playground

by bjoshuanoah

HTML

<nav>
<div class="top-level-menu" data-menu-global-id="12828">
  <input id="menu-name-global-id-12828" size="30" type="text" value="Some value here">
</div>
</nav>

<button>make me durrty!</button>

CSS

.top-level-menu{
height:75px;
padding: 20px;
background: #999;
}
.top-level-menu input{
width: 100%
}

.dirty{
border: 2px solid #efefef;
}

.clean{
 margin-top: 30px;
}

JavaScript

$('nav').on('change', '.dirty', function(e) {
    $(this).addClass('clean');
    $('input').val('all durrty');
});

$('button').on('click', function () {
   $('.top-level-menu').addClass('dirty');
    //only way to trigger the change:
    $('.dirty').trigger('change');
});