使用幻灯片库时jquery冲突

时间:2012-12-21 07:19:56

标签: jquery slider conflict

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

    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>

1 个答案:

答案 0 :(得分:0)

错误在这里 - &gt;

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

它应该是这样的。