0

TwitterBootstrapv2.1.1に基づくテンプレートを使用してJoomla2.5サイトを開発しています。

また、BootstrapX-clickoverを使用しています。これは、ホバーやフォーカスの代わりに要素をクリックするだけでポップオーバーを開いたり閉じたりできるBootstrap拡張機能です：https ：//github.com/lecar-red/bootstrapx-clickover 。

ポップオーバーでは、単純なAJAX通貨コンバーターを使用してHTMLファイルを呼び出しています。

これは、通貨コンバーターでポップオーバーをトリガーする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）の内容です。

<p>V okence vpišite znesek v britanskih funtih, ki ga želite preračunati v eure.</p>
<div id="currencyBox">
    <div class="currencyInner">
        <div class="data">
            <input type="text" name="znesek" id="znesek" value="1" /><span id="gbpsign">&pound;</span>
        </div>
        <div class="data">
            <select name="fromCurrency" id="fromCurrency">
                <option selected="" value="GBP">GBP</option>
            </select>
        </div>
        <div class="data">
            <select name="toCurrency" id="toCurrency">
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>

    <div style="currencyInner" id="calcresults"></div>

    <div class="clr">&nbsp;</div>

    <div class="data">
        <input class="btn btn-primary" type="button" name="convert" id="convert" value="Pretvori &raquo;" />
        <button class="btn" class="clickover" data-toggle='button' data-dismiss="clickover">Zapri</button>
    </div>
</div>

これは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>

現在、ポップオーバーをトリガーするリンクをクリックすると、2つのポップオーバーが表示されます。

1つのポップオーバーにはstatic_converter.htmlのコンテンツが含まれていますが、クリックオーバークラス「ポップオーバーフェードイン」がありません。最初のポップオーバーの後ろに隠れている他のポップオーバーには、正しいクラス「ポップオーバークリックオーバーフェードイン」がありますが、a.pretvornik.withajaxpowerタイトルタグから取得したタイトル以外のコンテンツはありません。

したがって、最初のポップオーバーで閉じるボタンをクリックすると、実際には2番目のポップオーバーが閉じます（クリックオーバークラスがあるため）。自分が何を間違っているのか理解できません。

ここでそれを見ることができます：http：//www.cheaperandmore.com（ページの左上部分の最初の半円の「£»€」をクリックしてください）。

どんな助けでもいただければ幸いです。

4

1 に答える 1

1

プラグインはTwitterBootstrappopoverプラグインを継承しているようです。つまり、呼び出す.clickover()場合は呼び出す必要がありません.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>

私は自由に変更bindしたり、変更したりunbindすることができました。これは、1.7以降で優先されているためです。onoff

競合を避けるためにイベント名 も追加しましたが、バインドを解除するため、click.ajaxload調べる必要があります。.one()

ajaxローディング部分がないクリックオーバーがある場合は、2つの別々のセレクターを作成し、それぞれでクリックオーバープラグインを異なる方法で有効にする必要があります。

たとえば、要素のrel="clickover"属性を削除して、上記のコードと両方を保持することができます。.withajaxpopover$('[rel="clickover"]').clickover();

于 2013-01-07T19:56:53.027 に答える