The following sample code shows two checkboxes wrapped in a div which has an alert set. Clicking the first checkbox triggers the alert on the div. The second checkbox uses stopPropagation() to suppress the alert. The same suppression technique is applied on list items added to the list. However, clicking the checkbox on the list items still displays the popovers. How can I suppress the popover when the checkbox is clicked.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"/>
</head>
<body>
<p>
<div class="container">
<div onclick='alert("div");'>
<p>The first checkbox displays an alert from the parent DIV when clicked. The second checkbox supress the alert.</p>
<input type="checkbox"></input>
<input type="checkbox" onclick="suppressPopover()"></input>
</div>
<p><p><p><p><p>
<div class="card" style="height: 10rem;">
<div class="card-header">The same supression technique applied on list items doesn't work for popovers.</div>
<ul id="list"></ul>
</div>
<p><p>
<button onclick="addListItem()">Add list item</button>
</div>
<script>
function suppressPopover() {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
}
function addListItem() {
let listItem = document.createElement('li');
listItem.setAttribute("data-toggle", "popover");
listItem.setAttribute("tabindex", "0");
listItem.setAttribute("data-trigger", "focus");
listItem.setAttribute("title", "Title");
listItem.setAttribute("data-placement", "bottom");
listItem.setAttribute("data-content", "Details");
listItem.innerHTML = "<input type=\"checkbox\" onclick=\"suppressPopover()\"> List Item";
let ele = $(listItem);
ele.popover();
document.getElementById("list").appendChild(listItem);
}
</script>
</body>
</html>