Bootstrap 4 Форма HTML Popover - PullRequest
Новая
       25

Bootstrap 4 Форма HTML Popover

0 голосов
/ 08 июля 2019

Попытка обновить Bootstrap 3. Ранее у меня была форма внутри некоторых всплывающих окон, которая теперь разбита с пустым содержимым. Я не могу понять, что изменилось, что ломает это. Форма демонстрируется динамически, однако ее можно просто воспроизвести.

HTML: 

<a id="workingpopovertest" data-toggle="popover">
    <button>Test</button>
</a>
<br /><br /><br /><br />&nbsp;
<a id="brokenpopovertest" data-toggle="popover">
    <button>Test</button>&nbsp;
</a>

Сценарий: 

    $("#brokenpopovertest").popover({
        html: true,
        title: "Broken Popover",
        animation: true,
        content: "<form>Input<input type='text' /></form>",
        container: "body"
    });
    $("#workingpopovertest").popover({
        html: true,
        title: "Working Popover",
        animation: true,
        content: '<h1>I Work Well</h1>',
        container: "body"
    });

Предоставление этого результата (как и ожидалось от именования элементов !!

enter image description here

Редактировать Добавлено

Это с: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

1 Ответ

1 голос
/ 08 июля 2019

Вы ищете sanitize опция

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ 

$("#brokenpopovertest").popover({
  html: true,
  title: "Broken Popover",
  animation: true,
  sanitize: false,
  content: "<form>Input<input type='text' /></form>",
  container: "body"
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<a id="brokenpopovertest" data-toggle="popover">
  <button>Test</button>&nbsp;
</a>
...