Javascript ajax将文章加载为整页幻灯片

我一直在琢磨这个问题，想知道是否有人有解决办法。实际上，我正在创建一个完整的视口滑块，它可以动态地将帖子加载到一个隐藏的div中，然后根据箭头单击的方向将其设置到页面中。我可以将隐藏的div设置为动画，但是脚本在第一次单击后停止运行，因此所有其他帖子都不会被拉入

HTML/PHP：

// First Div that hold all loaded data
<div id="Default" class="main">
    <div id="fullContent">
        <?php while ( have_posts() ) : the_post(); ?>
            <?php the_title(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>

        <div class="leftArrow">
            <?php previous_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
        <div class="rightArrow">
            <?php next_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
    </div>
</div>

// Second div where new content will be loaded
<div id="LoadAjax" class="direction"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

正如您在初始加载时所看到的，这一切都按照预期工作，但是如果我再次单击右键，则不会执行任何操作

我的问题是，有没有办法在第二次单击时重置功能？第二次点击时它没有运行的原因是什么

感谢您在高级课程中的帮助。这门学科绝对是业余的，所以任何反馈都将帮助我学习

干杯

A

编辑：添加了添加脚本

解决方案：

$.ajaxSetup({cache:false});

    $('body').on('click', '.rightArrow a', function(e){
        e.preventDefault();
        history.pushState({ path: this.path }, '', this.href);
        $('.disableClicks').show();
        RightSlide(this);
        return false;
    });

    $('body').on('click', '.leftArrow a', function(e){
        e.preventDefault();
        $('.disableClicks').show();
        history.pushState({ path: this.path }, '', this.href);
        LeftSlide(this);
        return false;
    });

    function RightSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'right'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

    function LeftSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'left'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

---

我把jquery改成了这个，它成功了！希望这能帮助其他人

$.ajaxSetup({cache:false});

$('body').on('click', '.rightArrow a', function(e){
    e.preventDefault();
    history.pushState({ path: this.path }, '', this.href);
    $('.disableClicks').show();
    RightSlide(this);
    return false;
});

$('body').on('click', '.leftArrow a', function(e){
    e.preventDefault();
    $('.disableClicks').show();
    history.pushState({ path: this.path }, '', this.href);
    LeftSlide(this);
    return false;
});

function RightSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'right'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};

function LeftSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'left'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};

---

我把jquery改成了这个，它成功了！希望这能帮助其他人

$.ajaxSetup({cache:false});

$('body').on('click', '.rightArrow a', function(e){
    e.preventDefault();
    history.pushState({ path: this.path }, '', this.href);
    $('.disableClicks').show();
    RightSlide(this);
    return false;
});

$('body').on('click', '.leftArrow a', function(e){
    e.preventDefault();
    $('.disableClicks').show();
    history.pushState({ path: this.path }, '', this.href);
    LeftSlide(this);
    return false;
});

function RightSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'right'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};

function LeftSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'left'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};