twitter-bootstrap Twitter 的 Bootstrap 弹出框，带有选择器和 data-* 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18011929/
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
Twitter's Bootstrap popover with selector and data-* attributes
提问by disfated
Using
使用
$(document).popover({
selector: '.selector'
});
ignores any data-*attributes specified in target elements.
For example
忽略data-*目标元素中指定的任何属性。
例如
<a class="selector" title="bla" data-content="some html" data-html="true">link</a>
popover will skip data-htmlattribute.
popover 将跳过data-html属性。
Proof: http://jsfiddle.net/YsEqb/
证明：http: //jsfiddle.net/YsEqb/
The question is: How make bootstrap take into account data-*attributes in case of delegated attachment ({ selector: '.selector' }) ?
问题是：如何使引导程序data-*在委托附件 ({ selector: '.selector' }) 的情况下考虑属性？
UPD
This was confirmed as bugand fixed. Version 3.0.0 won't have this bug.
采纳答案by Bass Jobsen
The data-elements are not used caused they are set on initialization instead of on show of the element. This won't work for a selector which only use the same options for all set in your initializator. I don't know this is a bug. (updateyes it is and it is fixed: https://github.com/twbs/bootstrap/issues/9222)
未使用数据元素，因为它们是在初始化时设置的，而不是在元素显示时设置的。这不适用于仅对初始化程序中的所有设置使用相同选项的选择器。我不知道这是一个错误。（更新是的，它是固定的：https: //github.com/twbs/bootstrap/issues/9222）
Quick fix extend your show function and set the options (again) there:
快速修复扩展您的显示功能并在那里设置选项（再次）：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>
var tmp = $.fn.popover.Constructor.prototype.show
$.fn.popover.Constructor.prototype.show = function () {
var $e = this.$element
if (typeof($e.attr('data-html')) != 'undefined')this.options.html = ($e.attr('data-html')==='true')
if (typeof($e.attr('data-placement')) != 'undefined')this.options.placement = $e.attr('data-placement');
/* add other options here */
tmp.call(this);
}
This will work for Twitter's Bootstrap 2.x and Twitter's Bootstrap 3(RC1)
这将适用于 Twitter 的 Bootstrap 2.x 和 Twitter 的 Bootstrap 3(RC1)
Also see: http://jsfiddle.net/bassjobsen/YsEqb/1/
另见：http: //jsfiddle.net/bassjobsen/YsEqb/1/
Note when using the CDN as above you will got a JS error on closing the popover (TypeError: this.remove is not a function) see: https://github.com/twbs/bootstrap/issues/8887
请注意，当使用上述 CDN 时，您将在关闭弹出窗口时遇到 JS 错误（类型错误：this.remove 不是函数），请参阅：https: //github.com/twbs/bootstrap/issues/8887
回答by GCrem
When specifying the selector you are resetting the data-html value back to the default of false
指定选择器时，您将 data-html 值重置回默认值 false
so explicitly stating:
如此明确地说明：
$(document).popover({
selector: '[data-toggle="popover"]',
html:true
});
will set the data-html value to true in this case. JS fiddle
在这种情况下，会将 data-html 值设置为 true。 JS小提琴
回答by Drixson Ose?a
Instead of using
而不是使用
$(document).popover({
selector: '.selector'
});
If you want using selector then this is the code:
如果你想使用选择器，那么这是代码：
$('body').popover({
selector: '.selector'
});
or
或者
$('.selector').popover();
