我对插件有问题:Codemirror。插件效果很好,但是当我尝试使用引导模式连接时,这是有问题的。
1)当我第一次点击时,没关系(1个代码块)2)当我关闭第一个模态并第二次运行时,即:3个代码块(重复)3)当我关闭第二个模态并运行第三次时,即:6个代码块(重复)
我的代码:
<div class="modal fade" id="code-editor" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="">Edytor elementu</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div id="code"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" name="close">Anuluj</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" name="save">Zapisz</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('[data-element-id]').append('<i class="glyphicon glyphicon-pencil edit-element"></i>').css({position: 'relative'});
$('body').on( 'click', '[data-element-id] i.edit-element', function(){
var code = $(this).parent();
var code_new = code.clone();
code_new.find('i.edit-element').remove();
$('#code-editor').modal('show');
$('#code-editor').on('shown.bs.modal', function () {
editor = CodeMirror($('#code-editor #code')[0], {
mode: "text/html",
lineNumbers: false,
value: '<h1>Example text</h1>'
});
});
$('#code-editor button[name="save"]').on('click',function(){
code.html(editor.getValue()).append('<i class="glyphicon glyphicon-pencil edit-element"></i>');
});
});
});
</script>
<link rel="stylesheet" href="assets/front/plugins/codemirror/lib/codemirror.css">
<script src="assets/front/plugins/codemirror/lib/codemirror.js"></script>
<script src="assets/front/plugins/codemirror/mode/xml/xml.js"></script>
和图像:结果图像
我有一个解决方案:
使用.off('click')
例:
$('body').off('click').on( 'click', '[data-element-id] i.edit-element', function(){