使用jquery動態刪除引導彈出窗口

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>

Answer 1

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

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