使用幻灯片库时出现jquery冲突

Question

使用滑块库时，我无法在单击按钮时调用函数。当我从项目中删除所有滑块内容时，它工作正常。

    var dec_Options=[];
    var dec_Details=[];


    window.onload = function(){
        // fix height width of screen....
        var width=(parseInt($(document).width()));  
        var height=(parseInt($(window).height()));
        $('body').css({'height': height,'width':width});
        $('#page').css({'height': height,'width':width});       
    }   


    $(document).ready(function (){

       //slider initialize............
        $("#slider").easySlider({

                    continuous: true,
                    nextId: "slider1next",
                    prevId: "slider1prev"
        });


   //get data from ajax..............       
     syncDecorationDetails(function(decoOption,decoDetails){
        dec_Options = decoOption;
        //alert('inside------'+dec_Options);
        //options=dec_Options;
        dec_Details = decoDetails;
    }); 




 });


    //on click function called when button clicks...........
    function loadGalleryImage(){
         alert('fd');
    }

HTML：

<!DOCTYPE HTML>
<html>
<head>
    <script src="js/jquery-1.8.3.js"></script>
    script src="js/syncData.js" type="text/javascript"></script>

// below script added is the file showqn above.............
    <script src="js/decor.js" type="text/javascript"></script>
//.........................

    <script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>


<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="container">
    <div id="content">  
        <div id="slider">
            <ul>                
                <li><img src="chori1.jpg" /></a></li>
                <li><img src="chori2.jpg" /></a></li>

            </ul>
        </div>  
    </div>
</div>
<div>   
<button onclick="loadGalleryImage()">Try it</button>
</div>
</body>
</html>

现在，如果我在此按钮之前的 div 内再添加一个按钮，那么它只能在 div 之外正常工作，而不是 div 中的那个。

<div id="decorationSelection" >
        <button onclick="loadGalleryImage()"></button>
</div>  
//...this button below work  but f  the above code of div and button inside is  there 
 <button onclick="loadGalleryImage()">Try it</button>

Answer 1

错误在这里->

// below script added is the file showqn above.............
<script src="js/decor.js" type="text/javascript"></script>
//.........................
<script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>

您说decor.js 是引用easySlider 函数的文件。但是，直到 在 调用它之后才加载 easySlider 脚本。这永远不会奏效。只需将 easySlider 脚本放在装饰脚本的上方，您就不会再在控制台中收到有关缺少 easySlider 功能的错误消息。

<script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>
<script src="js/decor.js" type="text/javascript"></script>

它应该是这样的。