【问题标题】:CodeMirror - multiplication Code blockCodeMirror - 乘法代码块
【发布时间】:2016-01-26 11:04:46
【问题描述】:

我的插件有问题: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">&times;</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>

还有图片: result image

【问题讨论】:

    标签: jquery html twitter-bootstrap modal-dialog codemirror


    【解决方案1】:

    我有一个解决方案:

    使用.off('click') 示例:

    $('body').off('click').on( 'click', '[data-element-id] i.edit-element', function(){
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-14
      • 2023-04-02
      • 2013-06-13
      • 1970-01-01
      相关资源
      最近更新 更多