3

役に立たなかった関連記事を見つけました: Twitter bootstrap:Popovers are not shown up on first click but show up on second click

違いは、ポップオーバー (いくつかのヒント アイコン) を必要とするいくつかの要素がある私のページにあるため、それらをループする必要があります..

私のマークアップ:

<a href="#" name="click_help_container" id="click_mainhomeform_tasks" data-original-title=""><img class="help_icon" src="http://media.mysite.com/pub/images/help/tips-icon.png">   </a>

これは私のJavaScriptです：

    var h=document.getElementsByName("click_help_container");
for (i=0;i<h.length;i++) 
{
    $('#'+h[i]['id']).click(
        function () 
        {
            var id=$(this).attr("id");
            getHelp(id,$(this),function(t,elem)
            {
                var isVisible = false;
                var clickedAway = false;                    
                $(elem).unbind('click');
                $(elem).popover(
                {
                    "title":t.title,
                    "content":"<p class='popover_body_text'>"+t.content+"</p>",
                    "html":true,
                    "animation":true,
                    "placement":"bottom",
                    "trigger":"manual"
                }).click(function(e) 
                {
                    $(this).popover('show');
                    clickedAway = false;
                    isVisible = true;
                    e.preventDefault();
                });

                $(document).click(function(e) {
                if(isVisible & clickedAway)
                {
                    $(elem).popover('hide')
                    isVisible = false;
                    clickedAway = false;
                }else
                {
                    clickedAway = true;
                }
                });

                //$(elem).popover('show');
            });
        });
}

問題は、tips-icon.png ボタンをクリックしたときに、最初のクリックでポップオーバーが表示されないことです (2 回目の .click() 呼び出しがあるためだと思います。2 回目にボタンをクリックすると、ポップオーバーが表示されます)。そして、それ以降はトグル動作を維持します。

4

1 に答える 1

0

すべての要素をループしてポップオーバーを 1 つずつ初期化する必要はありません。この名前のすべてのアイテムに一度にポップオーバーを適用できます (ループで行っているのと同じです)。

ポップオーバーを自分で手動で表示/非表示にする必要はありません。ブートストラップがそれを行うことができます。

これはあなたのために働くはずだと思います：

$("a[name='click_help_container']").popover(
            {
                "title":t.title,
                "content":"<p class='popover_body_text'>"+t.content+"</p>",
                "html":true,
                "animation":true,
                "placement":"bottom",
                "trigger":"click"
            });
于 2013-04-25T11:24:43.133 に答える