点击更改Bootstrap弹出窗口触发器

Question

我正在尝试使用html开关更改Bootstrap弹出窗口的触发器，我设置了一些基本的jQuery，但每次都将每个开关切换到弹出式窗口，但弹出窗口的响应方式不同。

我设置了每个弹出窗口，然后将其放入每次更改触发器时都可以调用的函数。我将触发器设置为全局变量，该变量由在html开关更改上运行的函数更改。

这是我的jquery，html位于codepen链接。

jQuery(document).ready(function ($) { 

    var click_funct = 'hover'; 
    $(".nrl-hint").contents().find(":checkbox").bind('change', function(){ 
    var check_checked = $('#nrl-hint').is(":checked"); 

    if (check_checked) { 
     console.log("Check ran"); 
    click_funct = 'click'; 
    $("[data-toggle=popover]").popover('destroy'); 
    $("[data-toggle=popover_2]").popover('destroy'); 
    $("[data-toggle=popover_3]").popover('destroy'); 
    $("[data-toggle=popover_4]").popover('destroy'); 
    $("[data-toggle=popover_5]").popover('destroy'); 
    box_funct(click_funct); 
    } 
    else { 
     console.log('Check ran x2'); 
     click_funct = 'hover'; 
     $("[data-toggle=popover]").popover('destroy'); 
     $("[data-toggle=popover_2]").popover('destroy'); 
     $("[data-toggle=popover_3]").popover('destroy'); 
     $("[data-toggle=popover_4]").popover('destroy'); 
     $("[data-toggle=popover_5]").popover('destroy'); 
    box_funct(click_funct); 
    } 
}); 
function box_funct(click_funct) { 
    $(".ow-button-hover").attr("href", "javascript:void(0)"); 
    $('.ow-button-hover').popover({ 
     html : true, 
     trigger : 'click', 
     placement: "top", 
     content: function() { 
     return $('#contact_form_nrl').html(); 
     }, 
     template: '<div class="popover nrl-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 

    $('[data-toggle=popover]').popover({ 
     html : true, 
     trigger : click_funct, 
     content: function() { 
     return $('#popover_content_wrapper').html(); 
     }, 
     template: '<div class="popover nrl-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 

    $('[data-toggle=popover_2]').popover({ 
     html : true, 
     trigger : click_funct, 
     content: function() { 
     return $('#popover_content_wrapper_2').html(); 
     }, 
     template: '<div class="popover nrl-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 
    $('[data-toggle=popover_3]').popover({ 
     html : true, 
     trigger : click_funct, 
     placement : 'left', 
     content: function() { 
     return $('#popover_content_wrapper_3').html(); 
     }, 
     template: '<div class="popover nrl-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 
    $('[data-toggle=popover_4]').popover({ 
     html : true, 
     trigger : click_funct, 
     placement : 'right', 
     content: function() { 
     return $('#popover_content_wrapper_4').html(); 
     }, 
     template: '<div class="popover nrl-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 

    $('[data-toggle=popover_5]').popover({ 
     html : true, 
     trigger : click_funct, 
     placement : 'right', 
     content: function() { 
     return $('#popover_content_wrapper_5').html(); 
     }, 
     template: '<div class="popover nrl-popover-2"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }); 
    } 
    box_funct(click_funct); 
}); 

这里是一个codepen链接来演示。 https://codepen.io/RobertCC/pen/Qqzwgd

我非常感谢任何帮助！我知道我可能错过了一些东西。

Answer 1

根据我对你想要做什么的理解，我认为我们可以减少大量使用的代码。 Bootstrap的Popover已经支持触发器，如click和hover，所以这只是使用新触发器重新初始化Popover的问题。

$("#pHover, #pClick").click(function() { 
 
    var popTrigger = $(this).data("trigger"); 
 
    $('[data-toggle="popover"]').popover('dispose'); 
 
    $('[data-toggle="popover"]').popover({ trigger: popTrigger }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<div class="btn-group"> 
 
    <button class="btn btn-info" id="pHover" data-trigger="hover">Hover</button> 
 
    <button class="btn btn-danger" id="pClick" data-trigger="click">Click</button> 
 
</div> 
 

 
<hr /> 
 

 
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button> 
 
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button> 
 
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button> 
 
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

现在对于这个例子的目的，你会发现，默认状态是，酥料饼根本不初始化。点击“悬停”或“点击”将data-trigger的值应用于弹出式初始化。

还请注意，我们必须摧毁酥料饼之前，我们用新的触发值（因此popover('dispose')重新初始化。

我的例子使用了最新版本的引导（4.x的），但是这应该与版本工作3以及与如何popovers一些注意事项已迁移（3.x中使用destroy和4.x使用dispose）

，还应注意值得考虑的。你可以使用data-trigger属性旁边data-toggle="popover"叫酥料饼它可能。有可能找出一种方法在这里更改data-trigger的值并重新初始化popover。

编辑：对于Bootstrap 3.x用户将popover创建函数包装在setTimeout（）中;像这样的功能。

$("#pHover, #pClick").click(function() { 
    var popTrigger = $(this).data("trigger"); 
    $('[data-toggle="popover"]').popover('dispose'); 
    setTimeout(function() { 
    $('[data-toggle="popover"]').popover({ trigger: popTrigger }); 
    }, 200); 
}); 

原来.popover('destroy')是异步的，另一个酥料饼的直接初始化失败，而此前一个被删除。