jQuery输入可排序更新输出

Question

我们正在使用jQuery Sortable库来进行类似于WordPress的动态菜单管理。并且它具有多级管理。

<ol id="my-nav">
    <li data-id="unique-id-here" data-label="">
        <span>My Label</span>
        <input type="text" class="label-change">
        <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文本区域。

例如：如果我们键入“ Whatever”，则可能需要“ W”或“ Wha”。并且没有更多的击键被更新到#output。但是在<span>和中的更新总是data-label可以正常工作。

我们非常需要这种功能。但是我们怎样才能做到这一点呢？

演示小提琴

https://jsfiddle.net/mayeenulislam/Lsrgu0qy/38/

• 什么都不做，看中的价值 <textarea>
• 不执行任何操作，只需在文本框中输入
• 现在<textarea>再次看到值

Answer 1

我弄弄了这个，并且能够使其工作。在这里检查我的分叉小提琴：jsfiddle.net/qf7n89oe。

我所做的唯一更改是更换了

this_menu_nav.attr('data-label', this_field_val).sortable('refresh');

与

this_menu_nav.data('label', this_field_val).sortable('refresh');

看来使用attr()会导致一些缓存问题，所以我将其替换为data()似乎没有此问题的缓存。