Javascript X-Editable 和 Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46926354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
X-Editable and Bootstrap 4
提问by Lobsterpants
Previously I have implemented inline editing with X-Editable and Bootstrap 3. With Bootstrap 4 it no longer seems to work. Check out the JsFiddle here.
以前，我已经使用 X-Editable 和 Bootstrap 3 实现了内联编辑。使用 Bootstrap 4，它似乎不再起作用。在这里查看 JsFiddle。
If I define a simple popup like this:
如果我定义一个这样的简单弹出窗口：
<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>
It works fine in BS3 but as soon as I switch to BS4 it no longer works giving the error:
它在 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)
In the console.
在控制台中。
What am I doing wrong? Should I be using a different library/fork?
我究竟做错了什么？我应该使用不同的库/叉吗？
回答by Bj?rn C
There is a new release that support Bootstrap 4:
有一个支持 Bootstrap 4 的新版本：
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
回答by Lobsterpants
Just to help anyone else who has this problem, here is how I dealt with it. I switched to inline mode:
只是为了帮助遇到此问题的其他人，这就是我处理它的方法。我切换到内联模式：
$(document).ready(function() {
$('.comment').editable({
mode: 'inline',
});
$('.hours').editable({
mode: 'inline',
type: 'number',
step: '1.00',
min: '0.00',
max: '24'
});
});
This works OK but the buttons don't render any images due to glyphicons no longer being supported.
这工作正常，但由于不再支持字形，按钮不会呈现任何图像。
I added font-awesomeand then used the following css to get the icons back:
我添加了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;
}
All seems to work as before. Thanks to Sadhu for pointing me in the right direction.
一切似乎都像以前一样。感谢萨杜为我指明了正确的方向。
回答by Sadhu
It seems that this is bug in bootstrap 4. Bootstrap 4 is currently in beta release.
似乎这是 bootstrap 4 中的错误。 Bootstrap 4 目前处于 beta 版本。
Check below link : https://github.com/vitalets/x-editable/issues/950
回答by fallino
Bootstrap 4 examples with FontAwesome 4 at https://jsfiddle.net/frallain/h5qmord2/and with FontAwesome 5 at https://jsfiddle.net/frallain/atwb19dz/
自举4个实施例与FontAwesome 4在https://jsfiddle.net/frallain/h5qmord2/并用FontAwesome 5在https://jsfiddle.net/frallain/atwb19dz/
BTW the CSS beforekeyword requires a double :
顺便说一句，CSSbefore关键字需要双:
.glyphicon-ok::before {
content: "\f00c";
}
.glyphicon-remove::before {
content: "\f00d";
}
.glyphicon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
}
