Javascript TypeError: $(...).modal 不是带有 bootstrap Modal 的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27064176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: $(...).modal is not a function with bootstrap Modal
提问by user61629
I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with Codeigniter 2.1. Following Dynamically inserting a bootstrap modal partial view into a view, I have:
我有一个 bootstrap 2.32 模式，我试图将其动态插入到另一个视图的 HTML 中。我正在使用 Codeigniter 2.1。在将引导模式部分视图动态插入视图之后，我有：
<div id="modal_target"></div>
as the target div for insertion. I have a button in my view that looks like:
作为插入的目标div。我的视图中有一个按钮，如下所示：
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
My JS has:
我的JS有：
$.ajax({
type : 'POST',
url : "AjaxUpdate/get_modal",
cache : false,
success : function(data){
if(data){
$('#modal_target').html(data);
//This shows the modal
$('#form-content').modal();
}
}
});
The button of the main view is:
主视图的按钮是：
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Here is what I'd like to store separately as a partial view:
这是我想单独存储为局部视图的内容：
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="user">User</label>
<div class="controls">
<input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="repeat">Repeat new password</label>
<div class="controls">
<input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
<a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>
</div>
When I click the button, the modal is inserted correctly, but I get the following error:
当我单击按钮时，模态插入正确，但出现以下错误：
TypeError: $(...).modal is not a function
How can I fix this?
我怎样才能解决这个问题？
回答by adsurbum
i just want to emphasize what mwebbersaid in the comment:
我只想强调mwebber在评论中所说的话：
also check if jQuery is not included twice
还要检查 jQuery 是否不包含两次
:)
:)
it was the issue for me
这是我的问题
回答by davetw12
This error is actually the result of you not including bootstrap's javascript before calling the modalfunction. Modal is defined in bootstrap.js not jQuery. It's also important to note that bootstrap actually needs jQuery to define the modalfunction, so it's vital that you include jQuery before including bootstrap's javascript. To avoid the error just be sure to include jQuery then bootstrap's javascript before you call the modalfunction. I usually do the following in my header tag:
这个错误实际上是你在调用modal函数之前没有包含 bootstrap 的 javascript 的结果。Modal 是在 bootstrap.js 而非 jQuery 中定义的。同样重要的是要注意 bootstrap 实际上需要 jQuery 来定义modal函数，因此在包含 bootstrap 的 javascript 之前包含 jQuery 至关重要。为避免该错误，请确保在调用该modal函数之前包含 jQuery 然后引导程序的 javascript 。我通常在我的标题标签中执行以下操作：
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>
回答by Rahul Mehra
After linking up your jquery and bootstrap write your code just below the Script tags of jquery and bootstrap.
链接你的 jquery 和 bootstrap 之后，在 jquery 和 bootstrap 的 Script 标签下面写你的代码。
$(document).ready(function($) {
$("#div").on("click", "a", function(event) {
event.preventDefault();
jQuery.noConflict();
$('#myModal').modal('show');
});
});<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>回答by Moslem7026
Check that jquerylibrary not included in html that load via Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>in your AjaxUpdate/get_modal
检查jquery不包含在HTML库，通过负载Ajax卸下摆臂<script src="~/Scripts/jquery[ver].js"></script>在AjaxUpdate/get_modal
回答by brad12s
Another possibility is that one of the other scripts your including is causing the problem by also including JQuery or conflicting with $. Try removing your other included scripts and see if it fixes the issue. In my case, after hours of needlessly searching my one code, I removed scripts in a binary search pattern and discovered the offending script right away.
另一种可能性是您包含的其他脚本之一也包含 JQuery 或与 $ 冲突导致问题。尝试删除其他包含的脚本，看看它是否能解决问题。就我而言，经过数小时无谓地搜索我的代码后，我以二进制搜索模式删除了脚本，并立即发现了有问题的脚本。
回答by Zaman Afzal
I have resolved this issue in react by using it like this.
我已经通过像这样使用它来解决这个问题。
window.$('#modal-id').modal();
回答by Radostin Stoyanov
I resolved this issue in Laravel by modifing the line below in resources\assets\js\bootstrap.js
我通过修改下面的行在 Laravel 中解决了这个问题 resources\assets\js\bootstrap.js
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
to
到
window.$ = window.jQuery = require('jquery/dist/jquery');
回答by cyperpunk
Run
跑
npm i @types/jquery
npm install -D @types/bootstrap
in the project to add the jquery types in your Angular Project. After that include
在项目中添加 jquery 类型到你的 Angular 项目中。之后包括
import * as $ from "jquery";
import * as bootstrap from "bootstrap";
in your app.module.ts
在你的 app.module.ts
Add
添加
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
in your index.html just before the body closing tag.
在 index.html 中，就在 body 结束标记之前。
And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.
如果您正在运行 Angular 2-7，请在 tsconfig.app.json 文件的类型字段中包含“jquery”。
This will remove all error of 'modal' and '$' in your Angular project.
这将消除 Angular 项目中“modal”和“$”的所有错误。
回答by Jaison
In my experience, most probably its happened with jquery version(using multiple version) conflicts, for sort out the issue we can use a no-conflict method like below.
根据我的经验，很可能发生在 jquery 版本（使用多个版本）冲突中，为了解决这个问题，我们可以使用如下所示的无冲突方法。
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$('button').click(function(){
$('#modalID').modal('show');
});
});
})(jQuery);
回答by B Liu
In my case, I use rails framework and require jQuery twice. I think that is a possible reason.
就我而言，我使用 rails 框架并需要两次 jQuery。我认为这是一个可能的原因。
You can first check app/assets/application.js file. If the jquery and bootstrap-sprockets appears, then there is not need for a second library require. The file should be similar to this:
您可以先检查 app/assets/application.js 文件。如果出现 jquery 和 bootstrap-sprockets，则不需要第二个库 require。该文件应类似于：
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
Then check app/views/layouts/application.html.erb, and remove the script for requiring jquery. For example:
然后检查app/views/layouts/application.html.erb，去掉需要jquery的脚本。例如：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
I think sometimes when newbies use multiple tutorial code examples will cause this issue.
我认为有时当新手使用多个教程代码示例时会导致此问题。
