Как я могу добавить новую пользовательскую кнопку и обработчик во всплывающий пользовательский интерфейс, редактируемый x

Я хочу добавить новую кнопку, которая удаляет редактируемый элемент li из элемента UL, который использует x-editable http://vitalets.github.io/x-editable/index.html библиотека с bootstrap3, такой html код, который создается динамически.

<ul id='list'>
  <li class='editable'>Editable element 1</li>
  <li class='editable'>Editable element 2</li>
  <li class='editable'>Editable element 3</li>
</ul>

и javascript, который добавляет x-редактируемое поведение:

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

Чтобы добавить кнопку в пользовательский интерфейс x-editable, я сделал что-то вроде:

 $.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>'+
'<button type="button" class="btn btn-warning btn-sm editable-remove"><i class="glyphicon glyphicon-trash"></i></button>';

этот jsfiddle показывает базовую работу http://jsfiddle.net/fGU58/1/. Я попытался добавить общие щелкните обработчик кнопки, но, видимо, библиотека останавливает распространение события.

заранее спасибо


javascript jquery x-editable
person le0diaz    schedule 19.05.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вероятно, вы можете попробовать следующее:

$(document).delegate(".editable-remove",'click',function(e){ 
    $("#lista .editable-open[data-original-title]").remove();
});

Иногда, когда вы используете библиотеку и элементы DOM добавляются с помощью javascript, событие не привязывается к элементу, поэтому я использовал делегат, вы можете использовать его вместо этого, но в том же формате.

Я заметил, что x-editable добавляет атрибут data-original-title к редактируемому элементу, поэтому я использовал его как часть селектора.

Вот мой FIDDLE

person Crystal    schedule 19.05.2014
comment
Большое спасибо за ваш ответ и объяснение. Он работает с минимальным изменением, вместо использования editable[data-original-title] в качестве селектора я использую editable-open[data-original-title]. Класс editable-open добавляется к текущему редактируемому элементу li, это правда, что data-original-title добавляется, но сохраняется, если вы редактируете любой другой, поэтому, если вы редактируете один и сохраняете его, если вы редактируете другой для удаления, он удаляет два элемента. Спасибо еще раз - person le0diaz; 19.05.2014
comment
И спустя почти 3 года это дает мне решение моей проблемы. Спасибо, парни! - person Mcload; 02.03.2018