弹出框在关闭后第一次点击时不显示

Question

我正在研究 this demo。我试图发现为什么弹出窗口在通过 .close 按钮关闭后第一次单击时无法正常工作。

 $("#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>

出于某种原因，关闭按钮在这里不起作用。我已经看到 this post 但那是另一种方法。

Answer 1

不知道这是否是最佳解决方案，但它有效

  $("#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 2

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

以上是 Popover 的 HTML 标记。

为什么它在双击而不是单击时起作用的实际问题是一个小棘手的问题。这背后的原因是 bootstrap 并且 angular 需要注册元素点击事件。

请使用以下代码在 ipod 中修复此问题。如果您打算使用触摸设备以外的设备，您可以使用 $(document).on('click', function(e) 而不是 $(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')
  });

弹出框在关闭后第一次点击时不显示

Popover is not showing on first click after closing it

javascript

jquery

twitter-bootstrap-3

bootstrap-popover