Блог

Я добавил кнопку удаления в редактируемую форму X, используя следующий скрипт (живая демонстрация).

Как это может быть достигнуто только для некоторых элементов (т.Е. .editable-with-delete ), а не глобально?

 $('.editable').editable();

$.fn.editableform.buttons  = '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable-with-delete').editable();


$("#list").on("click", "i.glyphicon-trash", function() {
  console.log('delete')
});

<h4>X-editable: display checklist as UL</h4>
<ul id='list'>
  <li class='editable-with-delete'>Editable element with delete</li>
  <li class='editable'>Editable element without delete</li>
  <li class='editable'>Editable element without delete</li>
</ul>
 

С функциями, предлагаемыми в настоящее время библиотекой X-editable, я не вижу способа сделать то, что вы хотите, просто установив параметры для ваших редактируемых файлов.

Однако вы можете сделать это, прослушав shown событие и добавив кнопку в обработчик событий. Вот пример:

 $('.editable').editable();

$(".editable-with-delete")
  .on("shown", function(ev, editable) {
    const buttons = editable.container.$form.find(".editable-buttons")[0];
    buttons.insertAdjacentHTML("beforeend", '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>')
  })
  .editable();

$("#list").on("click", ".editable-delete", function() {
  console.log('delete')
});
 

В идеале, в моих собственных приложениях я бы предпочел, чтобы кнопки добавлялись до отображения всплывающего окна, но я не вижу способа сделать это с помощью общедоступного API библиотеки в том виде, в каком она существует сейчас. Во всяком случае, с учетом оптимизации перепрошивки, выполняемой браузерами в наши дни, я сомневаюсь, что добавление кнопки в shown обработчик заметно влияет на пользовательский интерфейс.

Вот измененная скрипка: https://jsfiddle.net/kuqjtdar/3 /

Не самое элегантное решение, но вы можете добавить кнопку удаления, используя отдельное событие щелчка, и сбросить html, когда удаление не требуется. Смотрите фрагмент кода ниже.

 $('#list').editable();

$('#list').on('click', '.editable',  ()=> resetButtons());

$('#list').on('click', '.editable-with-delete', ()=> { 
resetButtons();
$.fn.editableform.buttons  = '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';
});

function resetButtons() {
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button><button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>';
}