Блог

Главная - Вопросы по программированию - Как редактировать содержимое динамически добавляемого li, не затрагивая другие элементы внутри li — jQuery?

Как редактировать содержимое динамически добавляемого li, не затрагивая другие элементы внутри li — jQuery?

#javascript #jquery #x-editable

#javascript #jquery #x-редактируемый

Вопрос:

 $("#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>

Я работаю над приложением списка задач и хочу сделать динамически добавляемые элементы списка доступными для редактирования. Когда пользователь нажимает на элемент списка, я хочу, чтобы они могли изменять текст и сохранять его автоматически после щелчка за пределами элемента списка.

Я сталкиваюсь с некоторыми проблемами, поскольку у меня есть элементы checkbox и button внутри элементов списка, которые я добавляю.

Я пробовал следующие решения, и ни одно из них не сработало:

  1. С помощью $('.edit').editable('save.php') — this отредактируйте все содержимое элемента, чтобы пользователь мог фактически удалить кнопку и флажок

  2. Использование contenteditable атрибута — тот же результат, позволяет пользователю редактировать все элементы внутри элемента списка.

  3. Я попытался обернуть пользовательский ввод в span и применить только class="edit" к span, но это не сработало. Смотрите CodePen здесь

Я ищу решения, которые используют 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>`);

Любая помощь была бы оценена.

Комментарии:

1. Codepen может возвращаться только к исходному значению, поскольку ajax не может заполнить его относительным URL. Подход span должен работать нормально, как только вы разберетесь с механикой и опциями editable плагина. Вам также понадобится некоторый идентификатор для отправки, если вы сохраняете серверную часть. Я давно не использовал этот плагин, но помните, что он легко настраивается и надежен

2. @charlietfl — У меня это работает! Теперь мне трудно понять, как сохранить обновленный контент в функции, поскольку я не хочу использовать сервер для сохранения этой информации. Не могли бы вы предоставить мне пример?

3. Вы могли бы научиться использовать localStorage и хранить его там. Плагин будет иметь обратные вызовы событий, которые вы можете использовать для обновлений.

Ответ №1:

Я попытаюсь помочь вам, используя только заголовок вопроса. Во-первых, я думаю, что вам нужно прослушивать события в родительском элементе, чтобы не имело значения, какие дочерние элементы у него есть (динамически или нет), это сработало бы, потому что элемент будет делегировать свои дочерние элементы.

Пример:

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

Затем, если то, что вы пытаетесь выполнить, также заключается в замене li на тот, который добавлен в последней строке вашего кода, я рекомендую один из этого:

  1. Оставьте этот код включенным в любое время, но скрытым для пользовательского интерфейса (например, display: none) и просто включите / выключите, когда пользователь нажимает. Таким образом, вы не попадете в ловушку этой ситуации и предложите пользователю более приятный опыт. Только не забудьте поставить правильные метки ARIA и все вещи a11y, такие как видимость.
  2. Не удаляйте li только его содержимое. Сначала сохраните его в переменной, переключите, когда пользователь нажимает на ваше содержимое, затем вернитесь к сохраненной версии, если пользователь не редактировал.

Надеюсь, это поможет!