Warm tip: This article is reproduced from stackoverflow.com, please click
bootstrap-4 html javascript

Popover HTML content with button and input not rendering

发布于 2020-03-29 21:00:33

I'm trying to add button to popover but it doesn't seem to render.

Is it done like I did or there is a better way.

$('#myinput').popover({
    trigger   : "focus",
    container : 'body',
    placement : "bottom",
    html      : true,
    title     : "Choosy Popover",
    content   : `<input></input> Excellent <br><button type="submit">Why no display</button>`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<input id="myinput" />
Questioner
rho
Viewed
52
分享
462 2020-01-31 18:35

Just Add sanitize: false

$('#myinput').popover({
    trigger   : "focus",
    placement : "bottom",
    html      : true,
    title     : "Choosy Popover",
    content   : `<input></input> Excellent <br><button type="submit">Why no display</button>`,
    sanitize  : false, // here it is
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<input id="myinput" />

Related issues

1
CSS selector of inner elements
2
How to define a font size that scales with browser zoom level?
3
How can I submit 's data without in HTML?
4
F# count all present links on html website
5
p tag within a div affecting the adjacent div's position
6
Dropdown Nav Menu Appears on Right and Stacked Horizontally
7
Javascript website security
8
Why is my getting cut off when resizing window?
9
How to get bootstrap to take whole screen
10
HTML JS