如何在Ajax中正确设置返回按钮？

Question

我创建了一个带有按钮的侧面板。在单击时，我加载分配给每个按钮的特定php文件。如何正确添加将使我们返回默认按钮列表的功能？

HTML：

<div class="sidemenu">
    <div class="content">
        <button data-content="first">Load first content</button>
        <button data-content="second">Load second content</button>
        <button data-content="third">Load third content</button>
    </div>
</div>

脚本：

jQuery( document ).ready( function( $ ) {

    $( '.sidemenu button' ).on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );

        $( '.sidemenu .content' ).empty();

        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                $( '.sidemenu .content' ).append( result );
                console.log(result);

            }
        });

    });
});

PHP：

function sidemenu_content() {
if( isset( $_GET['content'] ) ) {
    $content= $_GET['content'];
    if ( $content == 'first' ) {
        require_once( get_template_directory() . '/sidemenu/first.php' );
    } elseif ( $content == 'second' ) {
        require_once( get_template_directory() . '/sidemenu/second.php' );
    } elseif ( $content == 'third' ) {
        require_once( get_template_directory() . '/sidemenu/third.php' );
    }
}
wp_die();
}

我试图在三个php文件和<button data-content="return">Return</button>函数中分别添加sidemenu_content：

if ( $content == 'return' ) {
    require_once( get_template_directory() . '/sidemenu/return.php' );
}

但是很遗憾，它不起作用。

UPDATE

几乎所有内容都可以使用此代码。出现“返回”按钮，但onclick并未真正返回到按钮列表。

var backup;
jQuery( document ).ready( function( $ ) {

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                backup = $( '.sidemenu .content' ).innerHTML;
                $( '.sidemenu .content' ).innerHTML = result;
                $( '.sidemenu .content' ).empty();
                $( '.sidemenu .content' ).append( '<button class="return">Return</button>' + result );
                $( '.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).innerHTML = backup;
                })
            }
        })
    })
});

Answer 1

[我认为，如果在单击返回按钮浏览器时未发送AJAX来获取宝贵的黑名单代码，则对性能有好处。

var backup;
jQuery( document ).ready( function( $ ) {

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                backup = $( '.sidemenu .content' ).innerHTML;
                $( '.sidemenu .content' ).innerHTML = result;
                $( '.sidemenu .content' ).append('<button class="return">Return</button>');
                $('.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).innerHTML = backup;
                })
            }
        })
    })
});                  

如何运作：在清空所有数据之前，我已备份，并且在ajax响应成功之后，我清空了数据并追加了响应数据。在响应数据之后，我将返回按钮与js附加在一起，并为其设置onclick事件。如果单击此按钮，则.content中的所有数据为空，并附加备份的代码。P.S您可以优化此代码