Question

我有一个使用jQuery和Bootstrap的页面。一切正常，但出于某种原因，当我在事件上调用一个函数时，控制台会说$(...).function is not a function。例如，如果我有这个：

<script>
    $("#myModal").modal('show');
</script>

它工作正常，加载页面后模态会立即显示。但是，如果我试着这样称呼它：

<script>
    $("#myTrigger").click(function(e){
        e.preventDefault();
        $("#myModal").modal('show');
    });
</script>

它不起作用，控制台会出现此错误：

$（...）。modal不是函数

有什么想法吗？

修改

<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>

工作正常，但又一次，

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test); // Does alert
            $("#myModal").modal('show'); // Doesn't work
        });
    });
</script>

...没有按＆＃39;吨。由于警报有效，因此可以肯定地说触发器确实存在并且正确调用了click事件。我正在使用其他几个框架，WYSIWYG编辑器和uploadify。这可能是冲突错误吗？我一开始并没有这么认为，因为这两个案件都是一个接一个地被审判的，所以如果发生冲突，它也不会起作用，对吗？

更新

看起来这是一个非常糟糕的冲突问题。我尝试了以下方法：

var bootstrapModal = $.fn.modal.noConflict();
$.fn.bModal = bootstrapModal; // established outside the click event

$("#myTrigger").click(function(e){
    e.preventDefault();
    $("#myModal").bModal('show'); // doesn't work
});

我仍然遇到同样的问题。但是，在click事件中建立$.fn.bModal，如下所示：

var bootstrapModal = $.fn.modal.noConflict();

$("#myTrigger").click(function(e){
    e.preventDefault();
    $.fn.bModal = bootstrapModal; // established inside the click event
    $("#myModal").bModal('show'); // works fine
});

的工作。仍然无法解决为什么会发生这种情况以及为什么它在$(document).ready()上工作但不在$('#trigger').click()上工作，也许Chrome处理冲突的具体方式也是其中的一部分。无论如何，这样做。感谢所有帮助过的人。

Answer 1

您是否尝试将代码包装在

中？

$(document).ready(function(){
// your code
});

Answer 2

我已经尝试过您的代码段，然后我发现了同样的问题$(...).modal is not a function ..为什么呢？

原因之一是因为jquery未放置在bootstrap的来源之前。

这是错的：

<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.min.js"></script>

这是正确的：

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

请参阅此演示：https://jsfiddle.net/agaust/fmyoc5zx/

但是，如果谈论第三方插件，也许可以处理jQuery.noConflict

Answer 3

我认为问题在于当您进入页面时调用该函数但是尚未加载该文档。所以试试这个：

$(document).ready(function(){                          
$("#myTrigger").click(function(e){
  e.preventDefault();
  $("#myModal").modal('show');
});
}

另一种方法是使用ID myTrigger在HTML标记中设置onClick="functionname()"。然后声明函数如：

function functionname()
{
 //Code
}

你不需要$（文件）.ready（）;

您可以在此链接中看到同样的问题：jquery - is not a function error

Answer 4

真的很奇怪......尝试使用preventDefault（）fn。像这样：

<script>
    $("#myTrigger").click(function(){
        $("#myModal").modal('show');
        return false;
    });
</script>

Answer 5

我认为有一个脚本用普通的jquery覆盖你的$函数。我有一个类似的问题，问题是第三方插件包含一个包含的jquery库。每个自定义jquery代码都可以正常工作，但插件调用会导致javascript错误。看看你的第三方内容和脚本标签的顺序。

Answer 6

你的警报代码中有一个错误（缺少引号）阻止了模态显示试试这个：

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test"); // Does alert
            $("#myModal").modal('show'); // should work
        });
    });
</script>

Answer 7

从getbootstrap.com测试了此复制/粘贴演示。一切正常。你必须遇到冲突问题。 IMO jquery或bootstrap脚本与其他脚本冲突。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" class="btn btn-primary btn-lg" id="myTrigger">
      Launch demo modal
    </a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myTrigger").click(function(e){
                e.preventDefault();
                $("#myModal").modal('show'); // Does WORK
            });
        });
    </script>
  </body>
</html>

调用事件时jQuery函数不起作用

7 个答案: