温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Popover HTML content with button and input not rendering
bootstrap-4 html javascript

javascript - 带按钮和输入的Popover HTML内容未呈现

发布于 2020-03-29 21:41:30

我正在尝试将按钮添加到弹出窗口,但它似乎没有呈现。

是像我一样完成,还是有更好的方法。

$('#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" />

查看更多

提问者
rho
被浏览
70
462 2020-01-31 18:35

只需添加 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" />