Question

我正在尝试使用html开关更改Bootstrap popover的触发器，我已经设置了一些基本的jQuery，但每次我都按下开关，但popover响应不同。

我设置每个弹出窗口，然后将其放入一个我每次更改触发器时都可以调用的函数。我将触发器设置为全局变量，该变量由在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即可。

＆＃13;

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

＆＃13;

<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>

＆＃13;

现在，出于本示例的目的，您会注意到默认状态是Popover不会初始化。点击＆＃34; Hover＆＃34;或者＆＃34;点击＆＃34;将data-trigger的值应用于弹出窗口初始化。

另请注意，在使用新触发器值重新初始化之前，我们必须销毁popover（因此popover('dispose')。

我的示例使用了最新版本的Bootstrap（4.x），但这也适用于版本3，并考虑了迁移的迁移方式（3.x使用destroy而4.x使用{ {1}}）。

值得考虑的另外一个注意事项;您可以使用dispose属性和data-trigger来调用Popover。有可能找到一种方法来改变data-toggle="popover"的值，并以这种方式重新初始化弹出窗口。

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

data-trigger

事实证明$("#pHover, #pClick").click(function() { var popTrigger = $(this).data("trigger"); $('[data-toggle="popover"]').popover('dispose'); setTimeout(function () { $('[data-toggle="popover"]').popover({ trigger: popTrigger }); }, 200); });是异步的，并且另一个popover的立即初始化失败，而前一个popover被删除。

点击更改Bootstrap Popover触发器

1 个答案: