クリック時のブートストラップPopoverトリガーの変更

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); 
}); 

ここにデモするコードダイリンクがあります。 https://codepen.io/RobertCC/pen/Qqzwgd

大変ありがとうございます。私はおそらく何かが足りないことを知っている。

Answer 1

あなたがしたいことを私が理解したことに基づいて、使用しているコードの量を大幅に減らすことができると思います。ブートストラップの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を使用しています）考慮に値する

1つの注意して、あなたはdata-toggle="popover"と一緒data-trigger属性を使用して、ポップオーバーを呼び出すことができますそれは可能性があります。 data-triggerの値をここで変更する方法を見つけ出すことができますそのようにポップオーバーを再初期化することもできます。

編集：Bootstrap 3.xユーザは、setTimeout（）にpopover create関数をラップします。このような機能。

$("#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')が非同期であり、別のポップオーバーの即時初期化に失敗判明。