Javascript BootstrapX弹出和关闭按钮

我正在开发Joomla 2.5网站，该网站的模板基于Twitter Bootstrap v2.1.1

我还使用BootstrapX-clickover，这是一个引导扩展，允许通过单击元素而不是悬停或焦点来打开和关闭弹出窗口

在popover中，我使用简单的AJAX货币转换器调用HTML文件

这是使用货币转换器触发popover的HTML：

<a class="pretvornik withajaxpopover" href="#" rel="clickover" title="Pretvornik valut" data-load="http://www.cheaperandmore.com/files/static_converter.html">Click here</a>

这是HTML文件的内容(http://www.cheaperandmore.com/files/static_converter.html):

奥肯斯·维皮斯泰·兹涅塞克诉英国人芬蒂，基加ž精英普雷拉查纳蒂诉欧洲

&磅；
英镑
欧元
扎普里

这是javascript：

<script type="text/javascript">
//Add close button to bootstrap popovers
$('[rel="clickover"]').clickover();

//Load data
$('.withajaxpopover').bind('click',function(){
    var el=$(this);
    $.get(el.attr('data-load'),function(d){
        el.unbind('click').popover({content: d}).popover('show');
    });
});
</script>

//将关闭按钮添加到引导弹出窗口
$（'[rel=“clickover”]'）。clickover（）；
//加载数据
$（'.withajaxpopover'）.bind（'click'，function（）{
var el=$（本）；
$.get（el.attr（'data-load'），函数（d）{
el.unbind（'click'）.popover（{content:d}）.popover（'show'）；
});
});

现在，当我点击一个触发popover的链接时，会出现两个popover

一个popover包含来自static_converter.html的内容，但缺少clickover类“popover淡入”。 另一个Popor隐藏在第一个Popor的后面，它有正确的类“Popor clickover fade right in”，但它除了标题以外没有其他内容，标题取自a.pretvornik.withajaxpower标题标签

因此，当我在第一个popover中单击close按钮时，它实际上会关闭第二个popover（因为它有clickover类）。 我不知道我做错了什么

您可以在这里看到：（单击页面左上角第一个半圆中的“£»€”）

---

任何帮助都将不胜感激。

该插件似乎继承了Twitter Bootstrap popover插件：这意味着您不需要调用

。如果调用
.popover（）
（或者相反），则无需调用

你应该试试

<script type="text/javascript">

//Load data and bind clickover
$('.withajaxpopover').on('click.ajaxload',function(){
    var el=$(this);
    $.get(el.attr('data-load'),function(d){
        el.off('click.ajaxload').clickover({content: d}).clickover('show');
    });
});
</script>


//加载数据并绑定clickover
$（'.withajaxpopover'）。在（'单击.ajaxload'，函数（）{
var el=$（本）；
$.get（el.attr（'data-load'），函数（d）{
el.off（'click.ajaxload'）。clickover（{content:d}）。clickover（'show'）；
});
});

我自由地将
bind
和
unbind
更改为
on
和
off
，因为这是一个错误

我还添加了一个
click.ajaxload
，以避免冲突，但您应该仔细查看，因为它为您解除绑定


如果您的clickover没有ajax加载部分，那么您应该创建两个单独的选择器，并在每个选择器上分别启用clickover插件

例如，您可以使用AjaxPopover
元素删除
上的
rel=“clickover”
属性，并保留这两个
$（'[rel=“clickover”]'）。clickover（）和上面的代码。
虽然我们决定放弃此功能，但我尝试了@Sherbrow提出的解决方案，它只解决了一个问题。“关闭”按钮只有在首先单击“触发器选择器”后才能工作。之后，它工作正常。我搬走了
<script type="text/javascript">

//Load data and bind clickover
$('.withajaxpopover').on('click.ajaxload',function(){
    var el=$(this);
    $.get(el.attr('data-load'),function(d){
        el.off('click.ajaxload').clickover({content: d}).clickover('show');
    });
});
</script>