如何在不影响 li 内部的其他元素的情况下编辑动态添加的 li 的内容 - jQuery？答案

【问题标题】：How to edit the content of dynamically added li without affecting the other elements inside of the li - jQuery?如何在不影响 li 内部的其他元素的情况下编辑动态添加的 li 的内容 - jQuery？
【发布时间】：2020-09-07 21:57:18
【问题描述】：

$("#refdocs_list li").on('click', 'span[data-id="editable-list-item"]', function() {
  var $input = $('<input type="text" data-id="editable-list-item">');
  $input.val($(this).html());
  $(this).replaceWith($input);
  $input.focus();
});

$("#refdocs_list li").on('focusout', 'input[data-id="editable-list-item"]', function() {
  var $span = $('<span data-id="editable-list-item">');
  $span.html($(this).val());
  $(this).replaceWith($span);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
  <li><span data-id="editable-list-item">test1</span></li>
  <li><span data-id="editable-list-item">test2</span></li>
  <li><span data-id="editable-list-item">test3</span></li>
</ul>

我正在开发一个待办事项列表应用程序，我想让动态添加的列表项可编辑。当用户单击列表项时，我希望他们能够更改文本并在单击列表项外部时自动保存。

我面临一些挑战，因为我在附加的列表项中有复选框和按钮元素。

我尝试了以下解决方案，但都没有奏效：

使用$('.edit').editable('save.php') - 编辑元素的全部内容，以便用户实际删除按钮和复选框
使用contenteditable 属性 - 结果相同，允许用户编辑列表项内的所有元素。
我尝试将用户输入包装在一个跨度中，并且只将class="edit" 应用于该跨度，但这不起作用。请参阅 CodePen here

我正在寻找使用 jQuery Jeditable 并从头开始实施的解决方案。

这是我的代码：

let userInput = $('input').val().trim() 

let removeItem = '<button id="remove">x</button>'

let checkbox = '<input type="checkbox">'


$('ol').append(`<li>${checkbox} <span class="edit">${userInput}</span> ${removeItem}</li>`);

任何帮助将不胜感激。

【问题讨论】：

codepen 可能只会恢复到原始值，因为 ajax 无法在此处使用相对 url 完成。一旦你弄清楚了editable 插件的机制和选项，跨度方法应该可以正常工作。如果您要存储服务器端，您还需要一些标识符来发送。我已经很长时间没有使用该插件了，但请记住它是高度可配置且强大的
@charlietfl - 我搞定了！现在我很难弄清楚如何在函数中保存更新的内容，因为我不想使用服务器来保存该信息。你能举个例子吗？
您可以学习使用localStorage 并将其存储在那里。该插件将具有可用于更新的事件回调。

标签： javascript jquery x-editable

【解决方案1】：

我将尝试仅使用问题标题来帮助您。首先，我认为您需要的是监听父级中的事件，因此无论它有什么子级（动态与否）都无关紧要，因为该元素将委托给它的子级。

例子：

$('ol').on('click', 'li', () => console.log('make this editable'))

然后，如果您要完成的工作还是将li 替换为代码最后一行中附加的那个，我推荐以下之一：

始终保持该代码打开，但对用户界面隐藏（例如显示：无），并在用户单击时打开/关闭。这样您就不会陷入这种情况，并且会为用户提供更流畅的体验。只是不要忘记放置适当的 ARIA 标签和所有诸如可见性之类的东西。
不要只删除li 的内容。首先将其保存到变量中，当用户点击您的内容时切换，如果用户没有编辑，则返回保存的版本。

希望对你有帮助！

【讨论】：