jQuery сортируемое обновление вывода на входе

Question

Мы используем библиотеку jQuery Sortable для динамического управления меню, аналогичного WordPress.И он имеет многоуровневое управление.

<ol id="my-nav">
    <li data-id="unique-id-here" data-label="">
        <span>My Label</span>
        <button type="button" data-toggle="#"toggle-unique-id-here">Options</button>
        <div id="toggle-unique-id-here">
            <input type="text" class="label-change">
        </div>
        <ol><!-- PLACEHOLDER FOR SUBMENU --></ol>
    </li>
</ol>

<textarea id="output"></textarea>

Мы хотим обновить метку меню, используя унаследованное поле ввода.Итак, мы сделали что-то вроде ниже:

$('body').on('keyup change', '.label-change', function () {
    var this_menu_label_field = $(this);
    var this_field_val        = this_menu_label_field.val();
    var this_menu_nav         = this_menu_label_field.parents('li');

    // Update the text string inside the <li>
    this_menu_nav.find('span').html(this_field_val);

    // Update the data-label attribute
    this_menu_nav.attr('data-label', this_field_val).sortable('refresh');

    var serialized_data = menu_container.sortable('serialize').get();
    $('#output').val(JSON.stringify(serialized_data));
});

Код обновляет строку внутри <span> внутри соответствующего <li>, а также изменяет data-label.Но, к сожалению, он обновляет только первое нажатие клавиши в текстовой области #output.

Например: если мы введем «Что угодно», это может занять «W» или «Wha».И никакие дальнейшие нажатия клавиш не обновляются до #output.Но всегда обновление внутри <span> и data-label работает нормально.

Нам нужна такая функция критически.Но как этого достичь?