TypeError: $(...).modal is not a function with bootstrap Modal

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:

<div id="modal_target"></div>

as the target div for insertion. I have a button in my view that looks like:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

My JS has:

$.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?

391282 次浏览
小开

我想你应该用在你的纽扣上

<a data-toggle="modal" href="#form-content"

应该用 资料-目标代替 href

<a data-toggle="modal" data-target="#form-content"

确保模态内容已经加载

我认为问题在于，显示模态被调用了两次，一次在 ajax 调用中，这样很好，你说模态显示正确，但是错误可能来自那个按钮的 init 操作，那个按钮应该处理模态，这个操作不能执行，因为模态当时没有加载。

小开

这个错误实际上是在调用 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>
小开

我只想强调 Mwebber在评论中所说的:

还要检查是否两次没有包含 jQuery

:)

这是我的问题

小开

Check that jquery library not included in html that load via Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> in your AjaxUpdate/get_modal

小开

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.

小开

在我的例子中，我使用 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:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

然后检查 app/views/layouts/application.html. erb，删除需要 jquery 的脚本:

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

我认为有时当新手使用多个教程代码示例会导致这个问题。

小开

在将 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>

小开

我也有同样的问题。 Changing 

$.ajax(...)

到

jQuery.ajax(...)

没有工作。但后来我发现，JQuery 被包含了两次和删除其中一个修复了问题。

小开

根据我的经验，最有可能发生的是 jquery 版本(使用多个版本)冲突，为了解决这个问题，我们可以使用如下的非冲突方法。

jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$('button').click(function(){
$('#modalID').modal('show');
});
});
})(jQuery);
小开

I resolved this issue in Laravel by modifing the line below in resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

到

window.$ = window.jQuery = require('jquery/dist/jquery');
小开

快跑

npm i @types/jquery
npm install -D @types/bootstrap

在项目中添加 jquery 类型。 除此之外还包括

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

在你的应用程序模块里

加

<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.

And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.

这将删除所有的错误’模态’和’$’在您的角度项目。

小开

我通过这样使用它来解决这个问题。

window.$('#modal-id').modal();
小开

对我来说，我有 //= require jquery之后的 //= require bootstrap。一旦我移动 jquery 之前引导，一切工作。

小开

其他的答案在我的 react.js 应用程序中不起作用，所以我使用了普通的 JavaScript 来解决这个问题。

下面的解决方案奏效了:

  1. 为模态/对话框的关闭部分提供一个 id (在下面的例子中是“ myModalClose”)
<span>
className="close cursor-pointer"
data-dismiss="modal"
aria-label="Close"
id="myModalClose"
>
...
  1. 使用 id 为上面的关闭按钮生成一个 click 事件:
   document.getElementById("myModalClose").click();

也许你也可以使用 jQuery 来生成相同的关闭按钮的点击。

希望能帮上忙。


提交答案