Question

我想添加一个新的Button来删除一个可编辑的li项目和UL元素，该元素使用带有bootstrap3的x-editable http://vitalets.github.io/x-editable/index.html库，html代码就像是，它是以dinamically方式创建的。

<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>

和添加x-editable行为的javascript是：

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

要向x-editable的UI添加按钮，我已经完成了以下操作：

 $.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/ 我尝试将常用的点击处理程序添加到按钮，但显然库会停止传播事件。

提前致谢

Answer 1

您可以尝试以下方法：

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

有时当你使用一个库并且使用javascript添加DOM元素时，事件desn不会绑定到该元素，这就是我使用委托的原因，你可以使用on而不是同样的格式。

我注意到x-editable将一个data-original-title属性添加到正在编辑的元素中，因此我将其用作选择器的一部分。

这是我的FIDDLE

如何向x-editable pop up UI添加新的自定义按钮和处理程序

1 个答案: