-1

我正在尝试使用 AJAX 运行 jQuery 滑块脚本，但没有成功。

这是 AJAX 调用：

HTML

 <div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html')">test</a></div>

JS

<script type="text/javascript"> 
function loadDoc(id, url) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById(id).innerHTML=xmlhttp.responseText;
    }
  } 
  xmlhttp.open("GET",url,false); 
  xmlhttp.send(null);
} 
</script>

这是我实现 jQuery 滑块脚本的地方：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
 <body>
    <div class="container">
        <div id="va-accordion" class="va-container">
            <div class="va-nav">
                <span class="va-nav-prev">Previous</span>
                <span class="va-nav-next">Next</span>
            </div>
            <div class="va-wrapper" style="background:#f9e830;">
                <div class="va-slice va-slice-1">
                    <div class="va-content">
                        <p>TEST1</p>

                    </div>
                </div>
                <div class="va-slice va-slice-2">
                    <div class="va-content">
                        <p>TEST2</p>

                    </div>  
                </div>
                <div class="va-slice va-slice-3">
                    <div class="va-content">
                        <p>TEST3</p>

                    </div>  
                </div>

                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.vaccordion.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#va-accordion').vaccordion({
                expandedHeight  : 350,
                animSpeed       : 400,
                animOpacity     : 0.7,
                visibleSlices   : 2
            });
        });
    </script>
</body>

这是滑块的CSS

 /* Vertical Accordion Style */
.va-container{
position:relative;
margin:40px auto 0 auto;
 }
.va-wrapper{
width:100%;
height:100%;
position:relative;
overflow:hidden;
background:#000;
 }
.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:0px;
overflow:hidden;
 }

.va-title{
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
font-size:60px;
margin-left:20px;
color:#fff;
text-shadow: 0px 0px 1px white;
 }
 .va-content{
display:none;
margin-left:25px;
 }
 .va-slice p{
font-size: 22px;
font-style: italic;
font-family:Georgia, serif;
 }
 .va-slice ul{
margin-top:20px;
 }
 .va-slice ul li{
float:left;
margin:0px 2px;
 }
 .va-slice ul li a{
color:#000;
background:#eede2f;
padding:3px 6px;
font-size:14px;
font-family:'PT Sans', sans-serif;
text-transform:uppercase;
}
.va-slice ul li a:hover{
background:#000;
color:#fff;
text-shadow:none;
}
.va-nav span{
width:40px;
height:25px;
background:transparent url(../images/prev.png) no-repeat center center;
position:absolute;
top:-35px;
left:50%;
margin-left:-20px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
display:none;
z-index:100;
 }
 .va-nav span.va-nav-next{
background-image:url(../images/next.png);
top:auto;
bottom:-35px;
 }
.va-nav span:hover{
opacity:1.0;
 }

所以一切正常，如果它不是从 AJAX 运行的。任何想法如何使所有这些工作？谢谢 ）

解决方案 ：

 <div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html');jQuery('#va-accordion').vaccordion();">test</a></div>
4

1 回答 1

0

尝试使用 jQuery 中内置的 load 函数来处理 AJAX 请求，就像您编写的那样……我们将从消除过程开始。

转换这个：

<div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html')">test</a></div>

对此：

HTML

<div id="sn"><a href="#">test</a></div>

JS

$(function() {
  $('#sn a').on('click', function(e) {
    e.preventDefault();
    $('#sn').load('example4.html');
  });
});

编辑

如果它仍然不起作用，并且您在控制台中没有看到任何内容，请稍微修改......

try {
  $(function() {
    $('#sn a').on('click', function(e) {
      e.preventDefault();
      $('#sn').load('example4.html');
    });
  });
} catch(err) {
  alert(err);
}
于 2012-04-19T01:15:35.183 回答