Question

我正在测试Bootstrap Modal示例＆＃34; live demo＆＃34;我在bootstrap starter template中包含了bootstrap jquery和js，还有自定义javascript：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

但是我的文本编辑器运行的模式并不像他们网站上的模式那样显示。我点击按钮，没有任何反应。我尝试过使用Google Chrome Inspector /控制台，它显示：

未捕获的ReferenceError：$未定义

在函数开始的行。当我删除自定义j时，它不会显示错误，但仍然无法在Chrome，Edge或Firefox上显示该模式。

我的代码只是Bootstrap入门模板及其模态现场演示代码的组合，因此无需在此处发布代码。

此外，请注意我可以通过为按钮分配ID来使代码正常工作（按钮的工作方式类似于boostrap网站上显示的示例）：

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">

然后再添加自定义函数：

<script type="text/javascript">
  $("#button").click(function() {
      $('.modal').modal('show');
  });
</script>

但是，这与Bootstrap提供的示例代码不同。

Answer 1

通常，出现此错误的原因是您首先尝试使用JQuery而没有在项目中引用它。

尝试将以下内容添加到您的页面顶部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

谢谢大家的建议。我找到了答案： bootstrap的示例代码有一个错误：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

data-target=""应该包含模态的id，在这种情况下，＃myModal不是#exampleModal。

Answer 3

这意味着您在文档准备好之前运行脚本。试试这个

$(function(){
   $('#myModal').on('shown.bs.modal', function () {
     $('#myInput').focus()
   })
});

Boostrap Modal示例没有显示

3 个答案: