jQuery Sortable issue

input change event not fired.

by Reid Lyons

HTML

<div id="parent">
<p>
Type a value in the input but do not press tab or enter. Without leaving the input, click an item in the Plain List. Notice that the change event for the input is triggered.
</p>
<p>
Type a value in the input but do not press tab or enter. Without leaving the input, click an item in the Sortable List. Notice that the change event for the input <i>does not</i> trigger.
</p>
  <div class="section">
    <div class="title">
      Sortable List
    </div>
    <ul id="sortlist" class="list">
      <li>AARP</li>
      <li>AETNA</li>
    </ul>
  </div>
  <div class="section">
    <div class="title">
      Plain List
    </div>
    <ul id="plainlist" class="list">
      <li>Blue Cross</li>
      <li>Medicare</li>
    </ul>
  </div>
  <div>
    <input type="text" />
    <ol id="results" class="list">
    </ol>
    <p class="clear">Clear Results</p>
  </div>
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

CSS

.green {
  background-color: #98FB98;
}

.clear {
  color: blue;
  text-decoration: underline;
}

.list {
  font-size: 1rem;
}

.title {
  font-size: 1.25rem;
  text-decoration: bold;
}

.section {
  display: inline-block;
  border: 1px solid black;
  margin: 3px;
  padding: 3px;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, serif;
}

#parent {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 1rem;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 95%;
}

JavaScript

// find elements
var sortlist = $("#sortlist");
var plainlist = $("#plainlist");
var input = $("input");
var results = $("#results");

// handle click and add class
input.on("change", function() {
  results.append('<li>called input change</li>');
})

sortlist.find('li').each(addClickEvent);
plainlist.find('li').each(addClickEvent);

function addClickEvent(i, e) {
  $(e).on("click", function() {
    $(this).toggleClass("green");
    results.append('<li>clicked list</li>');
  })
}

$(".clear").on("click", function() {
  results.empty();
})

sortlist.sortable();