使用jQuery动态移除Bootstrap弹出窗口

Question

以下代码在选中列表项并悬停时显示弹出窗口。但是，当我尝试从列表标记中删除弹出窗口数据属性时，所有标记都被删除，但弹出窗口不会被删除。如何删除弹出窗口，使得未选中项不会显示弹出窗口？

/* Latest compiled and minified JavaScript included as External Resource */
// Checked list box items

$(function() {
  $('.list-group.checked-list-box .list-group-item').each(function() {



    // Settings
    var $widget = $(this),
      $checkbox = $('<input type="checkbox" class="hidden" />'),
      color = ($widget.data('color') ? $widget.data('color') : "primary"),
      style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
      settings = {
        on: {
          icon: 'glyphicon glyphicon-check'
        },
        off: {
          icon: 'glyphicon glyphicon-unchecked'
        }
      };

    $widget.css('cursor', 'pointer')
    $widget.append($checkbox);

    // Event Handlers
    $widget.on('click', function() {
      $checkbox.prop('checked', !$checkbox.is(':checked'));
      $checkbox.triggerHandler('change');
      updateDisplay();
    });
    $checkbox.on('change', function() {
      var id = $(this).closest('li').attr('id');
      var isChecked = $checkbox.is(':checked');
      if (isChecked) addPopOver(id);
      else removePopOver(id);
      updateDisplay();
    });

    function addPopOver(id) {
      id = "#" + id;
      $(id).attr('data-toggle', "popover");
      $(id).attr('data-trigger', "hover");
      $(id).attr('data-original-title', $(id).text());
      $(id).attr('data-content', "(No items selected)");
      $('[data-toggle=popover]').popover();
    }

    function removePopOver(id) {
      id = "#" + id;
      $(id).removeAttr("data-toggle");
      $(id).removeAttr("data-trigger");
      $(id).removeAttr("data-original-title");
      $(id).removeAttr("data-content");
    }
    // Actions
    function updateDisplay() {
      var isChecked = $checkbox.is(':checked');

      // Set the button's state
      $widget.data('state', (isChecked) ? "on" : "off");

      // Set the button's icon
      $widget.find('.state-icon')
        .removeClass()
        .addClass('state-icon ' + settings[$widget.data('state')].icon);

      // Update the button's color
      if (isChecked) {
        $widget.addClass(style + color + ' active');
      } else {
        $widget.removeClass(style + color + ' active');
      }
    }

    // Initialization
    function init() {

      if ($widget.data('checked') == true) {
        $checkbox.prop('checked', !$checkbox.is(':checked'));
      }

      updateDisplay();

      // Inject the icon if applicable
      if ($widget.find('.state-icon').length == 0) {
        $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
      }
    }
    init();
  });

  $('#get-checked-data').on('click', function(event) {
    event.preventDefault();
    var checkedItems = {},
      counter = 0;
    $("#check-list-box li.active").each(function(idx, li) {
      checkedItems[counter] = $(li).text();
      counter++;
    });
    $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
  });
});

/* Check Box For item required */

.state-icon {
  left: -5px;
}

.list-group-item-primary {
  color: rgb(255, 255, 255);
  background-color: rgb(66, 139, 202);
}


/* DEMO ONLY - REMOVES UNWANTED MARGIN */

.well .list-group {
  margin-bottom: 0px;
}

.list-inline>li {
  display: inline-block;
  padding-right: 12px;
  padding-left: 20px;
  margin-bottom: 3px;
  font-size: 17px;
}

#check-list-box {
  padding: 10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<ul id="check-list-box" class="list-group checked-list-box list-inline ">
  <li class="list-group-item event-item" id="venue" data-color="danger">Venue</li>
  <li class="list-group-item event-item" id="catering" data-color="info">Catering</li>
  <li class="list-group-item event-item" id="desserts" data-color="warning">Desserts</li>
  <li class="list-group-item event-item" id="photographer" data-color="success">Photographer</li>
  <li class="list-group-item event-item" id="bus" data-color="danger">Party buses</li>
  <li class="list-group-item event-item" id="castles" data-color="danger">Bouncy Castles</li>
  <li class="list-group-item" data-color="danger">Other</li>
  <!--<input type="textbox" name ="other" >-->
</ul>

- Sakibur Rahman

Answer 1

你可以使用.popover('destroy')。

function removePopOver(id) {
      id = "#" + id;
      $(id).popover('destroy')
}

- BravoZulu

---

这个方法帮助我删除了弹出框的设置，我传递了像放置、触发器、选择器等选项，当屏幕大小调整时无法重置实际的弹出框以正确显示，这个方法解决了这个问题，谢谢 +1。 - Leo

如果您正在使用4.1或更新版本，则需要使用方法dispose而不是destroy，否则会出现错误，指出不存在名为destroy的方法。 - Chase Ernst

Answer 2

为关闭显示的弹出窗口，您可以使用以下代码片段：

function removePopOver(id) {
      id = "#" + id;
      $(id).popover('dispose'); // JQuery > 4.1
      // $(id).popover('destroy'); // JQuery < 4.1
}

您还可以通过.popover类从DOM中删除所有创建的弹出窗口（当然，每个弹出窗口都有自己的ID，因此通过知道这些ID，您可以更加精确地进行操作）。

$('.popover').remove();

- Elyas Hadizadeh

---

谢谢，我一直在想为什么 destroy 没有起作用。 - Goddard