X-Editable和Bootstrap 4

Question

以前我用X-Editable和Bootstrap 3实现了内联编辑.使用Bootstrap 4它似乎不再起作用.在这里查看JsFiddle.

如果我定义一个这样的简单弹出窗口:

<div style="margin: 150px">
     <a href="#" class="comment" data-name="comment" data-type="text" data-pk="@item.Id" data-url="/" data-title="Enter comment">comment</a>
</div>

<script>
$(document).ready(function() {
        $('.comment').editable();
    });
</script>

它在BS3中工作正常,但是当我切换到BS4时,它不再起作用给出错误:

Uncaught TypeError: Cannot read property 'addClass' of undefined
at Popup.show (bootstrap-editable.js:1091)
at Editable.show (bootstrap-editable.js:1802)
at Editable.toggle (bootstrap-editable.js:1824)
at Editable.<anonymous> (bootstrap-editable.js:1547)
at HTMLAnchorElement.e (jquery-3.2.1.slim.min.js:2)

在控制台中.

我究竟做错了什么？我应该使用不同的库/分叉吗？

Answer 1

有一个支持Bootstrap 4的新版本:

https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable

Answer 2

只是为了帮助其他有这个问题的人,这就是我处理它的方法.我切换到内联模式:

 $(document).ready(function() {
        $('.comment').editable({
            mode: 'inline',
        });
        $('.hours').editable({
            mode: 'inline',
            type: 'number',
            step: '1.00',
            min: '0.00',
            max: '24'
        });
    });

这可以正常工作,但由于不再支持glyphicons,按钮不会渲染任何图像.

我添加了font-awesome然后使用以下css来获取图标:

        .glyphicon-ok:before {
        content: "\f00c";
    }
    .glyphicon-remove:before {
        content: "\f00d";
    }
    .glyphicon {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

所有似乎都像以前一样工作.感谢Sadhu指出我正确的方向.

Answer 3

似乎这是 bootstrap 4 中的错误。 Bootstrap 4 目前处于 beta 版本。

检查以下链接：https : //github.com/vitalets/x-editable/issues/950