Popover is not showing on first click after closing it

I am working on this demo. I am trying to discover why the popup is not functioning on first click after closing it by .close button.

 $("#pop-One").popover({
        placement: 'right',
        html: 'true',
        title : '<span class="text-info" style=""><strong>Model Type</strong></span>'+
                '<button type="button"  class="btn btn-default close" onclick="$("#pop-One").popover("hide");">×</button>',
        content : '<p class="popup" style="color:#323232;"> \Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s,</p>'
    });
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
body{padding:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-default" id="pop-One" data-toggle="popover"><i class="fa fa-question"></i></button>
</div>

For whatever reason, the close button is not working here. I already saw this post but that is a different method.

Answers:

Answer

don't know this is best solution or not but it's working

  $("#pop-One").popover({
        placement: 'right',
        html: 'true',
        title : '<span class="text-info" style=""><strong>Model Type</strong></span>'+
                '<button type="button"  class="btn btn-default close"\
     onclick="$(&quot;#pop-One&quot;).popover(&quot;hide&quot;);">×</button>',
        content : '<p class="popup" style="color:#323232;"> \Lorem Ipsum is simply dummy\ text of the printing and typesetting industry. Lorem Ipsum has been the industry standard\ dummy text ever since the 1500s,</p>'
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  });

here the result of my efforts

Answer
  <div id="timepickerDue" class="input-group date mytime activitydateblock" uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'outsideClick'" popover-placement="bottom" popover-class="customClass" popover-is-open="isEnable"></div>
 <div uib-popover-template-popup="" uib-title="" content-exp="contentExp()" origin-scope="origScope" class="popover ng-scope ng-isolate-scope bottom customClass fade in" tooltip-animation-class="fade" uib-tooltip-classes="" ng-class="{ in: isOpen }" style="top: 125px; left: 363px;"><div class="arrow"></div>

Above is the HTML markup of Popover.

Actual problem why it works on double click , not with single click is little tricky one. The reason behind this was bootstrap and angular needs the element click event to register with.

Please use the below code to fix this in ipod. If you intend to use other than touch devices you can use $(document).on('click', function(e) instead of $(document).on('touchstart', function(e)

    $(document).on('touchstart', function(e) {
         if ($("div[uib-popover-template-popup='']").hasClass('popover ng-scope ng-isolate-scope bottom customClass fade in') && $(e.target).closest('div[class^="popover-content"]').length <= 0)
         angular.element('#timepickerDue').triggerHandler('click')
  });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.