为什么我的模态jquery在链接到这些.js文件时不会起作用

时间:2016-06-15 14:03:27

标签: javascript jquery

我有一个弹出式模式,我需要何时确认用户是否会采取某种行动:

$(document).ready(function(){
    $("#button").click(function(){
        $("#the-dialog").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons:{
            "Option One": function(){
                //Perform Action
                $(this).dialog("close");
                },
            Cancel: function(){
                //Do nothing
                $(this).dialog("close");
                }
            }
        });
    });
});

这个模式需要这两个链接才能工作:

<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

当我在我的测试页面上运行时,它可以正常工作。现在我尝试将它集成到我的主页面,突然它不起作用,当我删除这两个链接时它突然正常工作。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>

为什么会这样?

4 个答案:

答案 0 :(得分:1)

为了扩展我的解释,你要加载3个不同的jquery脚本,其中至少有2个是不同的版本:

<script src="//code.jquery.com/jquery-1.12.4.js"></script> // v: 1.12.4

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> //this is ok, it's jQuery UI which extends jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> // v: 1.4.2
<script src="js/jquery.js"></script> //don't know which versions is this one

你的模态不起作用的原因(我非常确定如果你继续深入研究它并不是唯一不起作用的)是你可能有一些他们之间的冲突。

上传相同脚本的3个版本没有任何意义,除非您在应用程序中需要一堆bug。只需选择,最好是最新的,因为这很可能适用于所有情况。

还有一件事要确保你选择的jquery脚本是第一个加载的脚本(所以只需确保标题中的第一个脚本)。

答案 1 :(得分:0)

你需要在脚本顶部只加载一个jquery库,其他所有库都低于那个

答案 2 :(得分:0)

应删除帖子中的最后两行。他们正在加载旧版本的JQuery。您只需要加载一次JQuery和JQuery UI一次,这样您帖子中的前两个脚本标记就是您所需要的。

答案 3 :(得分:0)

您应该只使用这两个脚本:

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

而不是这两个:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>

在前两个,您将您的页面引用到位于外部网站(code.jquery.com)上的2个脚本。

在第二个:第一个引用外部网站(ajax.googleapis.com),第二个引用你的Scripts文件夹,因为你必须下载脚本,将它放在你的Scripts文件夹中然后转到添加对它的引用。

如果您希望脚本依赖其他服务器或者您希望下载它们并将项目引用到下载的脚本,那么您首先要做出决定。

如果您在页面上包含了所有4个链接,因为您引用了相同的脚本两次肯定不会工作,那么您需要一个脚本用于jquery,一个用于jquery-ui。

请注意,jquery脚本必须始终是第一个,因为jquery-ui基于常规jquery。