Question

我正面临一些问题。我正在尝试使用javascript click事件打开确认框，但收到以下错误。

Uncaught TypeError: this.getUID is not a function
    at Confirmation.init (VM8904 bootstrap-confirmation.js:151)
    at new Confirmation (VM8904 bootstrap-confirmation.js:16)
    at HTMLSpanElement.<anonymous> (VM8904 bootstrap-confirmation.js:427)
    at Function.each (VM8902 jquery.js:2)
    at m.fn.init.each (VM8902 jquery.js:2)
    at m.fn.init.$.fn.confirmation (VM8904 bootstrap-confirmation.js:419)
    at getConirmation (VM8906:19)
    at HTMLDivElement.onclick (VM8987:14)

我正在解释下面的代码。

<!DOCTYPE html>
<html>

<head>
  <script src="jquery.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div onclick="getConirmation();">
    <p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="top"></span></p>
  </div>
  <script>
    function getConirmation() {
      $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]',
        // other options
      });
    }
  </script>
</body>

</html>

在此我需要用户点击该图标时，该图标顶部会打开确认框。 Here is my plunkr code。请帮我解决这个问题。

Answer 1

您似乎正在使用bootstrap 3.0版+并且bootstrap-confirmation不支持3.0版本。因此，您可以降级引导程序版本或使用here中的其他库。

错误说明here。

Answer 2

阅读我一直在测试您的Plunker代码，主要问题在于您正在使用的jQuery和Bootstrap版本。根据boostraps确认文档，您需要......

jQuery >= 1.9
Bootstrap Popover >= 3.2 (included in bootstrap.js)

我已经改变了......

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

......并且没有问题。

另一方面，要使用此插件，您不需要在要应用它的元素中创建onClick事件。只需执行插件即可将其应用于具有data-toggle='confirmation'。

的所有元素

全部放在一起......

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div>
    <p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="bottom"></span></p>
  </div>
  <script>
  $(document).ready(function() {
      $('[data-toggle=confirmation]').confirmation({
          rootSelector: '[data-toggle=confirmation]',
      });
  });
  </script>
</body>

</html>

注意：我离开CDN只是为了显示我使用过的版本。当然，如果您愿意，可以将库下载到您的项目中。

无法使用javascript和Bootstrap打开确认框

2 个答案: