Jquery: форма в поповере

Question

Я столкнулся с проблемой, когда html не передается на поповер. Вместо того, чтобы содержать форму внутри него, всплывающее окно визуализируется пустым.

Здесь js:

$(document).on('mouseover', '.with-popover', function() {
  var elem_id = $(this).attr('name')
  $(this).popover({
    trigger: 'click',
    html: true,
    placement: 'top',
    container: 'body',
    content: function(){
      return $("#popover-div" + elem_id).html();

Здесь HTML :

    <td id="td-name{{cleaning.id}}" class="text-md-center with-popover" name="{{cleaning.id}}"> {{ cleaning.name }} 
      <div id="popover-div{{cleaning.id}}" style="display: none">
        <form method="post">
        <label for="cleaning_name">Name: </label>
        <input type="text" name="cleaning_name" value="{{ cleaning.name }}"> 
        <button type="submit" class="btn btn-success btn-sm update-cleaning"> Update </button>
        </form>
      </div>
    </td>

Любая помощь будет оценена. Спасибо.

Answer 1

Для тех, кто столкнется с этой проблемой. Вам просто нужно добавить sanitize: false в ваш поповер. Также, если вы используете ajax вызовы для получения данных с вашего сервера, используйте

$(document).on('mouseover', '.with-popover', function() {

для переключения поповера.