點擊更改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')是異步的，另一個酥料餅的直接初始化失敗，而此前一個被刪除。