调用模态弹出窗口后，第二次弹出窗口不起作用答案

【问题标题】：2nd time popover is not working after model popup once called调用模态弹出窗口后，第二次弹出窗口不起作用
【发布时间】：2016-12-28 07:34:21
【问题描述】：

在一个 html 页面中，我将 bootstrap 模型和 bootstrap popover 用于不同的目的。我使用 BS 模型来播放视频，使用 Popover 来分享这些视频。但我正面临 Popover 的问题，并且 Bootstrap 模型运行良好。 & 在关闭模型弹出窗口后，在 Bootstrap 模型调用之前，弹出窗口也可以正常工作，并且在浏览器控制台中显示错误... Uncaught TypeError: $(...).popover is not a function(...) & 未捕获的类型错误：无法读取 undefined(...) 的属性“提示” 我没有得到相关的解决方案，我尝试使用 jQuery.noconflict(), var $ = jQuery.noconflict() 以及
var bootstrapButton = $.fn 来解决.button.noConflict() // 将 $.fn.button 返回到先前分配的值 $.fn.bootstrapBtn = bootstrapButton 但同样的问题来了

如果有人遇到同样的问题......并得到相同的解决方案......然后帮助我解决同样的问题......在此先感谢

错误：

Uncaught TypeError: Cannot read property 'tip' of undefined(…)
Uncaught TypeError: $(...).popover is not a function(…)

我的项目中的 jQuery 和引导文件。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the MIT license
*/
<script type="text/javascript" src="js/libs/bootstrap.js"></script>

HTML

<a href="#"><img src="images/new_icons/sharing(22x22).png" height="40" width="40" class="share text-center" title="Share"></a>

jquery 弹出框

$(".share").popover({
                html: true,
                title: 'Share this with... <img width="20" height="20" title="close" data-toggle="clickover"  src="/static/img/new_icons/close(32x32).png" onclick="$(&quot;#share_popover&quot;).popover(&quot;hide&quot;);" id="close_skigit" class="close-skigit">',
                placement: 'auto bottom',
                trigger: 'manual',
                cache:true,
                content: $("#shareContent").html(),
            }).click(function(e){
                $(this).popover('toggle');
                e.preventDefault()   
            });

【问题讨论】：

您可以为此代码创建 JS Fiddle 示例吗？为了检查到底发生了什么。
你能写下你的漏洞代码来实际展示你的问题吗？

标签： jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

您需要为a 元素初始化弹出框，而不是img 元素（使用tabindex 和role 属性）。

此外，默认情况下，弹出框会在单击时自动关闭。因此，不需要 manual 触发器或任何 click 事件处理程序，据我所知，没有 cache 选项用于弹出框。

您也可以使用data- 属性在没有Javascript 代码的情况下完成任务。例如，您可以使用：

<a tabindex="0" role="button" data-toggle="popover" title="Share this with..." data-html="true" data-placement="auto bottom" 
  data-content="function() { return $('#shareContent').html(); }">
  <img src="images/new_icons/sharing(22x22).png" height="40" width="40" class="text-center" title="Share">
</a>

【讨论】：

您好 khalid 感谢您回答问题.... 问题有所不同并解决了问题。实际的问题是在弹出功能中有一个触发手册和弹出切换的点击事件，最重要的是弹出窗口在页面加载时初始化一次，所以在引导模型调用之后，它也在同一页面上。再次关闭模型后，我尝试打开一个弹出框，它尝试重新初始化曾经已经初始化的相同内容，因此下次由于页面未刷新，它没有再次初始化弹出框。我发现的简单解决方案是删除手动触发器

【解决方案2】：

问题已解决，实际问题是在弹出框功能中，有一个触发手册和弹出框切换的点击事件，最重要的是弹出框插件在页面加载时初始化一次，因此在引导模型调用之后也是相同的页面并再次关闭模型后，我尝试打开一个弹出框，因此单击弹出框尝试再次重新初始化。并抛出错误消息 $(...).popover is not a function。它曾经已经初始化，所以下次因为页面没有刷新它没有再次初始化。我发现的简单解决方案是删除手动触发器

$(".share").popover({
                html: true,
                title: 'Share this with... <img width="20" height="20" title="close" data-toggle="clickover"  src="/static/img/new_icons/close(32x32).png" onclick="$(&quot;#share_popover&quot;).popover(&quot;hide&quot;);" id="close_skigit" class="close-skigit">',
                placement: 'auto bottom',
                cache:true,
                content: $("#shareContent").html(),
            })

【讨论】：

【解决方案3】：

我在处理引导弹出窗口时遇到了同样的问题。然后我通过注释掉“jquery.min.js”导入脚本来摆脱这个。

popover 和“jquery.min.js”之间一定有冲突。请通过注释掉“jquery.min.js”再试一次。

<!-- <script type="text/javascript" src="./scripts/jquery.min.js"></script> -->

【讨论】：