Javascript X-可编辑和引导4

之前，我使用X-Editable和Bootstrap 3实现了内联编辑。使用Bootstrap4，它似乎不再工作

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

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

$（文档）.ready（函数（）{
$（'.comment'）.editable（）；
});

它在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)

Uncaught TypeError:无法读取未定义的属性'addClass'
在Popup.show（bootstrap可编辑.js:1091）
at Editable.show（bootstrap Editable.js:1802）
at Editable.toggle（bootstrap Editable.js:1824）
至少。（bootstrap可编辑。js:1547）
在htmlanchorement.e（jquery-3.2.1.slim.min.js:2）

在控制台中

---

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

这似乎是Bootstrap4中的错误。 Bootstrap 4目前处于测试版

查看以下链接：

---

为了帮助其他有这个问题的人，下面是我如何处理的。我切换到内联模式：

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

这可以正常工作，但由于不再支持图示符图标，按钮不会渲染任何图像

我添加并使用以下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为我指明了正确的方向。

有一个新版本支持Bootstrap 4:

---

引导4个示例，其中FontAwesome 4位于 在5点的时候

顺便说一句，CSS

before

关键字需要一个双

：

            .glyphicon-ok::before {
                content: "\f00c";
            }
            .glyphicon-remove::before {
                content: "\f00d";
            }
            .glyphicon {
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-style: normal;
            }

---

下面是另一个更全面的示例，它使x-editable与Bootstrap4兼容

从css中，您可以获取第69行

下的所有内容。表单组标签{…

对于javascript部分，您可以在文档加载中复制以下内容

$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
'<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';

$.fn.editable.defaults.mode='inline'；
$.fn.editableform.buttons=
'' +
'' +
'' +
'' +
'' +
'';

---

除了基本的x-editable依赖项之外，您还需要FontAwesome。

谢谢-阅读让我想到使用内联。再过几次Tweek，它就被分类了：）另一个问题提出：这是一些用户的叉子这应该是公认的答案，因为它解决了默认样式的问题。需要font awesome css来查看submit和取消按钮。CDN链接：