草庐IT

javascript - 在 Popover 外部单击时隐藏 Bootstrap Popover

coder 2024-07-15 原文

当用户点击弹出窗口外的任何地方时，我试图隐藏 Bootstrap 弹出窗口。 (我真的不确定为什么 Bootstrap 的创建者决定不提供此功能。)

我找到了以下代码 on the web但我真的不明白。

// Hide popover on click anywhere on the document except itself
$(document).click(function(e) {
    // Check for click on the popup itself
    $('.popover').click(function() {
        return false; // Do nothing
    });  
    // Clicking on document other than popup then hide the popup
    $('.pop').popover('hide');  
});

让我感到困惑的主要是行 $('.popover').click(function() { return false; });。这一行不是为点击事件添加事件处理程序吗？这如何防止调用 popover('hide') 隐藏弹出窗口？

有没有人见过更好的技术？

注意:我知道这个问题的变体已经在这里问过，但这些问题的答案涉及比上面的代码更复杂的代码。所以我的问题实际上是关于上面的代码

最佳答案

我做了 http://jsfiddle.net/BcczZ/2/ ，希望能回答您的问题

示例 HTML

<div class="well>
    <a class="btn" data-toggle="popover" data-content="content.">Popover</a>
    <a class="btn btn-danger bad">Bad button</a>
</div>

JS

var $popover = $('[data-toggle=popover]').popover();

//first event handler for bad button
$('.bad').click(function () {
    alert("clicked");
});


$(document).on("click", function (e) {
    var $target = $(e.target),
    var isPopover = $target.is('[data-toggle=popover]'),
        inPopover = $target.closest('.popover').length > 0

    //Does nothing, only prints on console and wastes memory. BAD CODE, REMOVE IT
    $('.bad').click(function () { 
        console.log('clicked');
        return false;
    });

    //hide only if clicked on button or inside popover
    if (!isPopover && !inPopover) $popover.popover('hide');
});

正如我在评论中提到的，事件处理程序不会被覆盖，它们只是堆叠。由于 .bad 按钮上已经有一个事件处理程序，它将与任何其他事件处理程序一起被触发

在 jsfiddle 中打开你的控制台，在页面上的某处按下 5 次(不是弹出按钮)然后单击 bad button 你应该看到 clicked 打印的次数与你按下的次数相同

希望对你有帮助

附言: 如果你仔细想想，你已经看到了这种情况，尤其是在 jQuery 中。 想一想存在于使用多个 jquery 插件的页面中的所有 $(document).ready(...)。该行只是在文档的 ready 事件上注册了一个事件处理程序

关于javascript - 在 Popover 外部单击时隐藏 Bootstrap Popover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17842121/

Popoverjavascriptcodeclickjquerytwitter-bootstrap

有关javascript - 在 Popover 外部单击时隐藏 Bootstrap Popover的更多相关文章

  1. ruby - 从外部访问类的实例变量 - 2

    我理解(我认为)Ruby中类变量和类的实例变量之间的区别。我想知道如何从该类外部访问该类的实例变量。从内部(即在类方法中而不是实例方法中)，它可以直接访问，但是从外部，有没有办法做MyClass.class.[@$#]variablename?我没有任何具体原因要这样做，只是学习Ruby并想知道是否可行。 最佳答案 classMyClass@my_class_instance_var="foo"class上述yield:>>foo我相信Arkku演示了如何从类外部访问类变量(@@)，而不是类实例变量(@)。我从这篇文章中提取了上述内

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby隐藏与覆盖 - 2

    我刚刚了解到，在Java中，覆盖和隐藏之间是有区别的(静态方法是隐藏的，而不是覆盖)，这意味着Java使用早期绑定(bind)和后期绑定(bind)。是否有与方法隐藏类似的东西，或者它只是具有方法重写？ 最佳答案 Java具有三种不同的“方法”:实例方法，静态方法和构造函数。Ruby只有一个:实例方法。在Java中，静态方法的行为必须不同于实例方法，因为类不是对象。它们没有类，因此也没有父类(superclass)，因此没有要覆盖的内容。在Ruby中，类与其他任何对象一样都是对象，它们具有一个类，该类可以具有父类(superclas

  4. ruby - 无法安装 gem - make 未被识别为内部或外部命令可运行程序或批处理文件 - 2

    我想在Windows7上安装带有ruby​​1.9.3的rspec-railsgem。我收到一些错误消息，提示无法安装某些json库。所以，我使用下面的说明来解决它。来源=The'json'nativegemrequiresinstalledbuildtools从[rubyinstaller.org][3]下载[Ruby1.9.3][2]从[rubyinstaller.org][3]下载DevKit文件对于Ruby1.9.3，使用[DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe][4]将DevKit解压到路径C:\Ruby193\DevKit运行cd

  5. ruby - 使用 Class.new 时访问外部范围 - 2

    是否有可能以某种方式访问​​Class.new范围内的a？a=5Class.new{defb;aend}.new.b#NameError:undefinedlocalvariableormethod`a'for#:0x007fa8b15e9af0>#:in`b' 最佳答案 即使@MarekLipka的回答是正确的——改变变量范围总是有风险的。这是可行的，因为每个block都带有创建它的上下文，因此您的局部变量a突然变得不那么局部了——它变成了一个“隐藏的”全局变量:a=5object=Class.new{define_method(

  6. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby - 存储外部 API 的密码 - 最佳实践 - 2

    如果我构建了一个应用程序来访问来自Gmail、Twitter和Facebook的一些数据，并且我希望用户只需输入一次他们的身份验证信息，并且在几天或几周后重置，那会怎样是在Ruby中动态执行此操作的最佳方法吗？我看到很多人只是拥有他们客户/用户凭证的配置文件，如下所示:gmail_account:username:myClientpassword:myClientsPassword这看起来a)非常不安全，b)如果我想为成千上万的用户存储此类信息，它就无法工作。推荐的方法是什么？我希望能够在这些服务之上构建一个界面，因此每次用户进行交易时都必须输入凭据是不可行的。

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - 如何通过 belongs_to 按外部 id 和本地属性进行过滤？ - 2

    以下模型通过belongs_to链接:require'mongoid'classSensorincludeMongoid::Documentfield:sensor_id,type:Stringvalidates_uniqueness_of:sensor_idend...require'mongoid'require_relative'sensor.rb'classSensorDataincludeMongoid::Documentbelongs_to:sensorfield:date,type:Datefield:ozonMax1h,type:Floatfield:ozonMax8h

随机推荐