安装两个jQuery脚本时出错(冲突)

时间:2014-04-26 17:02:39

标签: javascript jquery jquery-autocomplete conflict

我在安装两个不同的jquery脚本时遇到问题,一个脚本用于自动完成功能,另一个脚本是我在codecanyon.net中购买的名为Smart Alert的脚本。

两个脚本在分离时工作正常,但是当我尝试将两个脚本放在同一页面时,只有一个可以正常工作...

例如,test1.php:

http://www.tlmweb.tk/test1.php

请输入" a"在蓝色输入字段中,自动完成将起作用,现在单击名为" Buscar"的蓝色按钮。没有任何反应......

现在,test2.php(请使用相同的链接,只需更改为test2.php):

请输入" a"在蓝色输入字段中没有任何反应(自动完成不会工作)但请点击蓝色按钮命名" Buscar"和智能警报将正常工作......

现在,两个HTML代码之间的唯一区别是第44行,我删除了脚本:用于自动完成。

因此,如果删除工作智能警报,当然,不会工作自动完成,如果没有删除工作自动完成但不是智能警报......

任何人都可以帮助我知道如何解决这个问题????

请您随意查看源代码和JS脚本

1 个答案:

答案 0 :(得分:0)

查看您的浏览器控制台:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

您的jQuery版本对于您的插件而言太旧了。请使用较新版本的jQuery或在您的插件中手动修复它。

编辑:您需要重新排序JS包含顺序。在包含jQuery UI或任何插件之前,您需要首先定义jQuery。因为它们都使用jQuery。

编辑2:我修复了你的html头部分。只需使用它(并且请在脚本块中修复不可显示的utf-8字符):

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="icon" href="/favicon.ico?81796153" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico?84193814" type="image/x-icon">

    <title>Panel Administrativo - Vales</title>

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link type="text/css" href="css/smoothness/ui.css" rel="stylesheet">
    <link href="alert/css/alert.css" rel="stylesheet">
    <link href="alert/themes/default/theme.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/960.css">
    <link rel="stylesheet" type="text/css" href="css/text.css">
    <link rel="stylesheet" type="text/css" href="css/blue.css">
    <link href="css/botones-btn.css" rel="stylesheet">
    <link href="content/styles.css" rel="stylesheet">
    <style type="text/css">
        #smartAlert[data-icon="error"] #smartAlertIcon {
        background-image: url(img/hand.png);
        }

        #smartAlert[data-icon="correcto"] #smartAlertIcon {
        background-image: url(img/confirm.png);
        }

        h1.ImagenNombreSec { background:url(../images/EmitirVales48.png) left 3px no-repeat; padding-left:60px;}
    </style>

    <script type="text/javascript">
        var Operadores = {
            "12": "PEDRO DE LOYOLA JUAREZ",
            "6": "RAUL GARCIA MARQUEZ",
            "10": "�ARIGON GOMEZ FARIAS",
            "14": "FIDEL ISLAS ISLAS",
            "9": "JAVIER LOPEZ CAMARENA",
            "5": "GERARDO MARQUEZ VELEZ",
            "7": "GABRIEL ENRIQUE MARTINEZ PEREZ",
            "13": "ISABEL PEREZ GODINES",
            "1": "JUAN PEREZ JOLOTE",
            "11": "JUAN PEREZ JOLOTE",
            "8": "MARIA DE TODOS LO ANGELES PEREZ GOMEZ"
        };
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/blend/jquery.blend.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/ui.sortable.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    <script type="text/javascript" src="js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="js/ListarOperadoresAyuda.js"></script>
    <script src="alert/js/alert.js"></script>
    <script id="source" type="text/javascript" src="js/graphs.js"></script>
    <script type="text/javascript" src="js/fechayhora.js"></script>

    <!--[if IE]>
    <script language="javascript" type="text/javascript" src="js/flot/excanvas.pack.js"></script>
    <![endif]-->

    <script type="text/javascript" src="js/CambiosOP.js"></script>

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/iefix.css" />
    <script src="js/pngfix.js"></script>
    <script>
        DD_belatedPNG.fix('#menu ul li a span span');
    </script>
    <![endif]-->
</head>