How to click on the list when the checkbox in the item does not show the list item is defined on the-CodePudding

Example code first click the checkbox triggered when the parent div alert, the second use the checkbox stopPropagation to not display alert, but apparently this method does not apply to popover, click Add in the list item to generate a list of the item, click the checkbox will jump out of the popover, how should the checkbox in the item click on the list are not shown popover?

 & lt; html> 
 
<script SRC="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" & gt; </script> 
<script SRC="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" & gt; </script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/& gt; 
 

<body> 
 
 The first checkbox displays an alert from The parent DIV when clicked, The second The checkbox suppress The alert. & lt;/p> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script> 
The function suppressPopover () {
Window. The event? Window. The event. The cancelBubble=true: e.s topPropagation (); 
} 
The function addListItem () {
Let listItem=document. The createElement method (" 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 - the content ", "Details"); 
ListItem. InnerHTML="& lt; Input type=\ "checkbox " onclick=\ "suppressPopover () " & gt; The List Item "; 
Let ele=$(listItem); 
Ele. Popover (); 
Document. The getElementById (" list "). The appendChild (listItem); 
} 
</script>

CodePudding user response:

Let ele=$(listItem);
Ele. Popover ();
This part of the comment out it is ok to should
Practical application is to add a judgment qualified then run it