2

私はAJAXの小さな部分を機能させるようにしようとしています。正しいURLを警告しますが、ページを読み込めませんでした。これはajax.jsです：

$(document).ready(function() {  
    $('#sidebar-content ul li a').click(function(){ 
     var toLoad = $(this).attr('href');  
    $('#content').load(toLoad);
    return false;
});
});

私はここでLaravelを使用しています。これが私のdefault.template.phpです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{{$title}}</title>
    <meta name="description" content="Empire - XHTML Template" />
    {{ HTML::style('css/style.css') }}
    {{ HTML::script('js/jquery.min.js') }}
    {{ HTML::script('js/ajax.js') }}

    <!-- PAGE OPENING ANIMATION -->
    <script type="text/javascript">
        jQuery(document).ready(function()
        {jQuery('#page').css({'display':'inline','width':'300px','overflow':'hidden','margin-right':'340px'});
        jQuery('#sidebar').css({'margin-left':'326px'});});
        jQuery(window).load(function() {jQuery('#hp_preloader').delay(800).animate({'opacity':'0'},1400,function()
        {jQuery('#slider-nivo').nivoSlider(
        {controlNav:true,controlNavThumbs:false,keyboardNav:false,pauseOnHover:false,prevText:'',nextText:'',effect:'fade',animSpeed:300,pauseTime:4000});
        jQuery(this).remove();jQuery('#sidebar').delay(800).animate({'margin-left':'0px'},2100);jQuery('#page').delay(800).animate({'margin-right':'0px','width':'666px'},
        2100);});});
    </script> 
    <meta charset="UTF-8">
</head>
    <body>

<!-- SITE WRAPPER -->
<div id="wrapper">
<div id="page">
<div id="content">
{{ $content }}
<!-- SIMPLE HORIZONTAL LINE -->
<div class="hr2"></div>
</div>
<!-- #content ends -->
</div>
    <!-- #page ends -->
<!-- SIDEBAR -->
<div id="sidebar">
        <div id="sidebar-content">

    <!-- MENU -->
   <ul id="menu">
   <li class="current"><a href="<?php echo URL::to_route('articles'); ?>">ANASAYFA</a></li>

   <li><a href="<?php echo URL::to_route('abouts'); ?>">HAKKIMIZDA</a></li>
   <li>HİZMETLERİMİZ
    <ul>
    <li><a href="./blog3.html">Eğitim Hizmetlerimiz</a></li>
    <li><a href="./portfolio-3c.html">Neurofeedback</a></li>
<li><a href="./portfolio-2c.html">Biofeedback</a></li>
    </ul>   
</li>       
</div>
    <!-- #sidebar ends -->
    </div>
    <!-- #wrapper ends -->
</body>
</html>

ページに入るとアニメーションがあります。リンクをクリックすると、アラートでクリックすると、アドレスは正しく表示されますが、コンテンツは開かず、Javaコンソールにすべてのスクリプトファイルが再度読み込まれます。確認できますか？

4

1 に答える 1

1

A-tags のデフォルトの動作であるリダイレクトを防止するのを忘れていたようです。クリック イベントを次のように変更します。

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    $('#content').load(toLoad);
    return false;
});

それでも機能しない場合はconsole.log()、次のようにデバッグに使用します。

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    console.log(toLoad); // whats in toLoad?
    console.log($("#content")); // maybe content isnt there?
    $('#content').load(toLoad);
    return false;
});
于 2012-08-26T11:57:56.440 に答える