Проблемы с множественным и динамическим HTML-поповером при отображении и скрытии - PullRequest
Новая
       27

Проблемы с множественным и динамическим HTML-поповером при отображении и скрытии

0 голосов
/ 04 октября 2019

прежде всего спасибо за чтение.

Итак ... У меня проблема с попсовым загрузчиком. Я перепробовал множество конфигураций, но безуспешно, поэтому постараюсь объяснить проблему как можно яснее.

У меня есть несколько элементов в столбцах начальной загрузки, и когда пользователь нажимает на одну из них, появляется всплывающее окнос формой в ее popover-содержимом.

Каждая форма отличается по своим атрибутам, вы можете выбрать различные параметры в поповере и затем отправить форму.

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

Я думаю, что что-то упустил, но не могу выяснить, что.

Код, который загружает содержимое: 

$("[data-toggle=popover]").popover({
  trigger: "click focus",
  template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><a href="#" class="popover-close">&otimes;</a><div class="popover-body"></div></div>',
  content: function() {
    var $html = $(this).parent().find(".prod-popover").eq(0).html();
    return $(".popover-content").html($html);
  }
});

Я пробовал с триггеромфокус, нажмите, руководство и их сочетание с теми же результатами. Я также попытался изменить оболочку .popover-content с помощью # popover-content.

Код для скрытия popover: 

$(document).on("click", "a.popover-close", function(e) {
  e.stopPropagation();
  $(".popover-content").popover('hide');
  return false;
});

Еще один способ скрытия, найденный здесь при переполнении стека 

$(document).click(function(e) {
  if ($(".popover").has(e.target).length == 0 || $(e.target).is(".close")) {
    $("#popoverId").popover("hide");
  }
});

Еще один: 

$("[data-toggle=popover]").on('click', function (e) {
       e.preventDefault();
       e.stopPropagation();
        $("[data-toggle=popover]").not(this).popover('hide');
    });

HTML: 

<div class="col-md-6 col-sm-6 col-xs-12 bt-border k-item" data-placement="right" data-toggle="popover" data-title="Whatever" data-container="body" data-html="true">
<div class="hidden prod-popover">
    <form class="cart" role="form" method="post" action="">
        <div class="form-group">
            <label>Label</label>
            <textarea rows="2" placeholder="PLACEHOLDER"></textarea>
        </div>
        <div class="form-group">
            <div class="btn-group pop-quantity" role="group">
                <input type="text" value="1" min="1" step="1">
            </div>
        </div>
        <button type="button">Send<button>
    </form>
</div>
<div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2"><img src="SRC" alt=""></div>
    <div class="col-md-8 col-sm-8 col-xs-8">
        <h4 class="no-pad-bt">Whatever</h4>
        <p class="no-pad-bt">Description</p>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2 text-right">
        <p>Price</p>
    </div>
</div>

Любая помощь будет высоко оценена.

...