javascript - Bootstrap 弹出窗口不适用于 html 注入(inject)

Question

我正在尝试创建动态弹出窗口，这些弹出窗口是从“字典”数组生成的，该数组将 HTML 注入(inject)到页面上的现有文本中。该代码最初用于工具提示并且运行良好，但现在我尝试转移到弹出窗口。然而 html 没有注入(inject)，我坚持了下来。目的是单击一个单词并弹出定义等。我还在同一页面上有一个正常运行的标准弹出窗口。我在控制台中没有收到任何错误:(

//script.js
$(function() {
  var $words = [

    {
      word: "ね",
      kana: "",
      romaji: "ne",
      definition: "n postposition<br>indicates emphasis, agreement, request for confirmation, etc., is it so, hey, come on, listen, not",
      note: ""
    },
    {
      word: " 動画",
      kana: "どうが",
      romaji: "douga",
      definition: "video, movie, moving picture, animation, animated cartoon, in-betweens (animation)",
      note: ""
    },
    {
      word: " 今日",
      kana: "きょう",
      romaji: "kyou",
      definition: "adjective today, this day, these days, recently, nowadays",
      note: ""
    },
    {
      word: "毎日",
      kana: "まいにち",
      romaji: "mainichi",
      definition: "every day",
      note: ""
    },
    {
      word: "も",
      kana: "",
      romaji: "mo",
      definition: "adjective today, this day, these days, recently, nowadays",
      note: " te form"
    },
    {
      word: "頑張りましょう",
      kana: "がんばりましょう",
      romaji: "ganbarimashou",
      definition: "verb to persevere, to persist, to keep at it, to hang on, to hold out, to do one\'s best",
      note: "lets do"
    },
  ];
  $('.define').definitions({
    term: $words
  });

}); //end $(function()


$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

/*==================js/jquery.define.js============================*/

var html;
$.fn.definitions = function(words) {
  //$.fn alias for jQuery.prototype extends jQuery with your own functions

  //console.log("words: ", words); // returns words array

  var count = 0;

  // Iterate over a jQuery object, executing a function for each matched element.
  return this.each(function() {
    var _results = [];
    var _term = words["term"]; //console.log(_term);  //return each definition / word pair object in a single array
    var _this = $(this); //console.log(_this);  

    if (_term.length > 1) {
      $.each(_term, function() {

        for (let key in _term) {
          // iterates over all properties of an object returning value only.
          var val = _term[key]; //console.log(val);  //returns each dict def / word pair object individually

          _results.push(
            _this.html(function(index, htmlContent) {
              if (
                _this
                .text()
                .toUpperCase()
                .indexOf(val["word"].toUpperCase()) >= 0
              ) {
                //console.log(html);
                return (html = define_replace(
                  val["word"],
                  val["definition"],
                  val["kana"],
                  val["romaji"],
                  val["note"],
                  htmlContent,
                  key
                )); //html injecting
              }
            })
          );
        } //end for...in
      });
      $("#japanese").html(html); //changed from .text()

    } else {
      _results.push(
        _this.html(function(index, htmlContent) {
          if (
            _this
            .text()
            .toUpperCase()
            .indexOf(_term["word"].toUpperCase()) >= 0
          ) {
            return (html = define_replace(
              _term["word"],
              _term["definition"],
              _term["kana"],
              _term["romaji"],
              htmlContent
            ));
          }
        })
      );
    }
  }); //end  return this.each(function()
}; //end  $.fn.definitions

//inject class before and after found word in html
var define_replace = function(word, def, kan, rom, note, html, key) {
  //console.log(arguments);

  return html.replace(
    '<a  data-html="true"  data-toggle="popover" title="Popover - title" data-content="' + def + '>' + word + " " + '</a>', "gi"
  ); //html building - replace word + space with html

  (n - adv, n, ctr) time;
  hours;
  (P) < /span></span >
}; // end define_replace

//index.html
<div class="define">
  <p id="japanese">ね 、 毎日 動画 今日 も 頑張りましょう</p>
</div>

Answer 1

在 bootstrap.js 之前包含 popper.min.js 或使用 bootstrap.bundle.min.js 并在各处启用弹出窗口

$(function () {
  $('[data-toggle="popover"]').popover()
})