Как сгенерировать Bootstrap Popover при выделении текста через несколько div

Question

Как я могу сгенерировать всплывающее окно Bootstrap на мероприятии мыши (например, mouseup или click), когда пользователь выбирает текст более чем на одном <div>?

Я пытался создать копию своегоHTML и JQuery (как можно ближе) в этой скрипке .

Как вы можете видеть в примере скрипты, я не могу использовать div, который инкапсулирует весь текст <div> sпотому что у каждого есть идентификатор, который мне нужен для функционирования кнопок, которые будут у всплывающего окна.

Вы заметите, что всплывающее окно появляется, когда текст выделен в одном div, но когда вы выбираете текстиз более чем 1 div всплывающее окно не появляется.

Забавно, что это работало на Firefox неделю назад или около того, но перестало работать, как только я обновил Firefox до последней версии (66.0.2).Чтобы добавить, эта проблема была на Chrome с самого начала.

Я пробовал разные решения, которые я нашел здесь, при переполнении стека, но ни одно из них, похоже, не сработало в моем случае.

Любые решения относительно того, что я делаю неправильно, какие альтернативные способы я мог бы сделатьпопытаться сделать это, или причины, почему это может не сработать?

Редактировать:

Я также пытался mouseup для этого, и, похоже, в этой версии это не работаетFF или последний Chrome.Я изменил его на click, потому что у меня также есть другие всплывающие окна, которые закрываются, когда пользователь clicks в main_div или где-либо за пределами всплывающих окон.Поскольку событие click наступает после события mouseup, я обнаружил, что оно убьет мой поповер сразу после его появления.Мне пришлось удалить этот поповер из списка всплывающих окон, которые были выбраны в вышеупомянутом событии click, и вручную добавить его для мест, где я хотел, чтобы это произошло.

У меня нет проблем с использованием mouseup,просто я попробовал это, и я не заметил никаких преимуществ по сравнению с click, поэтому я временно изменил его.

Answer 1

Вы должны иметь возможность использовать jQuery.each () для получения отдельных всплывающих подсказок для каждого окна сообщения.Это позволяет каждому окну сообщения иметь свой собственный набор переменных elem, text, row и id.

$('.messagebox').each(function() {
    var elem = $(this),
        text = elem.find('.message_content p').text(),
        row = elem.closest('.message_row'),
        id = row.attr('data-msg-id');

    elem.on('click', function(event) {
        event.stopPropagation();

        var args = {
            placement: "top",
            content: ("ID:" + id + " Text: " + text),
            trigger: "manual",
        };

        elem.popover(args);
        elem.popover("show");
    });
});

Answer 2

Просто измените .on ("click" ...) на .on ("mouseup" ...).

Протестировано на Ubuntu 16.04, x64.Firefox 66.0.2

$("#main_div").on("mouseup", ".messagebox", function(e) {
  var selected_text = window.getSelection().toString();
  var elem = $(this);
  var row = elem.closest(".message_row");
  var id = $(row).attr("data-msg-id")
  e.stopPropagation();
  if (selected_text !== "") {
    elem.popover({
      placement: "top",
      content: ("ID:" + id + " Text: " + selected_text),
      trigger: "manual",
    });
    elem.popover("show");
  }
});

// Remove Popover on Hover
$("body").on('mouseenter', '.popover', function(e) {
  e.stopPropagation();
  $(this).remove();
});

#main_div {
  padding-top: 50px;
}

.messagebox {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  margin-top: 5px;
  padding-left: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <div id="main_div">
    <div class="big_box">
      <div class="message_row" data-msg-id="50">
        <div class="messagebox">
          <div class="message_content">
            <p>
              Random Text Here.
            </p>
          </div>
        </div>
      </div>
      <div class="message_row" data-msg-id="51">
        <div class="messagebox">
          <div class="message_content">
            <p>
              Some Text here
            </p>
          </div>
        </div>
      </div>
      <div class="message_row" data-msg-id="52">
        <div class="messagebox">
          <div class="message_content">
            <p>
              Some more text here.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>