Popovers not showing up on first click but show up on second click

Question

I found a related post which did not help: Twitter bootstrap:Popovers are not showing up on first click but show up on second click

The difference is in my page I have several elements which require popover (several tips-icon), so I need to loop over them..

My markup:

<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>

This is my 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');
            });
        });
}

The problem is when I click on the tips-icon.png button, the popover doesn't show up on first click (I guess it's because I have 2 .click() calls When I click on the button the second time popover shows up and it then maintains it's toggle behavior from there onwards.

is it necessary to unbind the click when you are preventing the default action in your next click handler.Is getHelp and Ajax call or something? I think itd be better to attach these handlers via a class rather than getting the elements by name and looping over them yourself you could just do $('.my-popover-class').click(function () { // Your Logic }); and that will attach the event to all objects of that class. While native javascript is faster than jQuery you are still using it here you should probably utilize it. — BillPull, Apr 02 '13 at 15:40

score 0 · Answer 1 · answered Apr 25 '13 at 11:24

You don't need to loop through all elements and initialize popovers one by one, you can apply popover to all items with this name at once (same as you're doing in loop).

And you don't need to show/hide popovers manually by yourself, bootstrap can do it for you.

I think this should work for you:

$("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"
            });

Popovers not showing up on first click but show up on second click

1 Answers1