Twitter的具有选择器和data- *属性的Bootstrap弹出窗口 [英] Twitter's Bootstrap popover with selector and data-* attributes

问题描述

使用

$(document).popover({
    selector: '.selector'
});

忽略目标元素中指定的任何data-*属性.
例如

ignores any data-* attributes specified in target elements.
For example

<a class="selector" title="bla" data-content="some html" data-html="true">link</a>

弹出窗口将跳过data-html属性.

证明: http://jsfiddle.net/YsEqb/

问题是:在委派附件({选择器:'.selector'})的情况下，如何使引导程序考虑data-*属性?

The question is: How make bootstrap take into account data-* attributes in case of delegated attachment ({ selector: '.selector' }) ?

UPD
这已确认为错误和

UPD
This was confirmed as bug and fixed. Version 3.0.0 won't have this bug.

推荐答案

未使用数据元素，因为它们是在初始化时设置的，而不是在元素显示时设置的.对于仅对初始化器中所有设置都使用相同选项的选择器，这将不起作用.我不知道这是一个错误. (更新是的，它是固定的: https://github.com. com/twbs/bootstrap/issues/9222 )

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. (update yes it is and it is fixed: 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);
}

这将适用于Twitter的Bootstrap 2.x和Twitter的Bootstrap 3(RC1)

This will work for Twitter's Bootstrap 2.x and Twitter's Bootstrap 3(RC1)

另请参阅: http://jsfiddle.net/bassjobsen/YsEqb/1/

请注意，当使用上述CDN时，关闭弹出窗口时会出现JS错误(TypeError:this.remove不是函数)，请参见:

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

这篇关于Twitter的具有选择器和data- *属性的Bootstrap弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！