Question

我的queue.html看起来像

<div class="queue">
    <div class="player_controls">
        <button id="previous" class="btn btn-large navigator-button navigator-icons">
            <i class="icon-backward icon-large"></i>
        </button>
        <button id="play" class="btn btn-large navigator-button navigator-icons">
            <i class="icon-play icon-large"></i>
        </button>
        <button id="next" class="btn btn-large navigator-button navigator-icons">
            <i class="icon-forward icon-large"></i>
        </button>
        <button id="shuffle" class="btn btn-large navigator-button navigator-icons">
            <i class="icon-random icon-large"></i>
        </button>
    </div>

    <div class="queue_list">
        <!--p>your localStorage data will be displayed here</p-->
        <div class="queue_item hide-item">
            <img class="thumbnail" />
            <p class="title"></p>
        </div>
    </div>
</div>

我的jQuery函数看起来像

$(function(){
    $('#queue').click(function(){
        $("#feature").load("templates/queue.html");
        var template = $('.queue_item').clone();
        if (localStorage['queue'] != null ) {
            $('.queue_list').append('<p>You have not added any video to the queue yet</p>');
        } else {
            var queue_list = JSON.parse(localStorage['queue']);
            for (var i = 0; i < queue_list.length; i++) {
                console.log(queue_list[i]);
            }
        }
    });

    $('body').on('click', '#play', function(){
        bootstrap_alert.success('will play video now');
    });

    $('body').on('click', '#previous', function(){
        bootstrap_alert.success('will play previous video now');
    });

    $('body').on('click', '#next', function(){
        bootstrap_alert.success('will play next video now');
    });

    $('body').on('click', '#shuffle', function(){
        bootstrap_alert.success('will shuffle videos now');
    });
});

CSS看起来像

.hide-item {
    display: none;
}

.view-item {
    display: block;
    height: 120px;
    margin-left: 1%;
}

只要点击Queue按钮，上面的jQuery功能就会启动，并显示html为You have not added any video to the queue yet并快速消失。

为什么不留在页面上？

Answer 1

我注意到你正在使用按钮。你把它们放在表格里了吗？如果您这样做，浏览器将回发您的页面并刷新您的页面。该页面将恢复其原始状态。

Answer 2

我会猜测并说你要附加一个被.queue_list函数替换的load()元素。

尝试在加载新内容时在回调中添加附加内容：

$('#queue').click(function() {
    $("#feature").load("templates/queue.html", function() { //callback
        var template = $('.queue_item').clone();
        if (localStorage['queue'] != null) {
            $('.queue_list').append('<p>You have not added any video to the queue yet</p>');
        } else {
            var queue_list = JSON.parse(localStorage['queue']);
            for (var i = 0; i < queue_list.length; i++) {
                console.log(queue_list[i]);
            }
        }
    });

});

jQuery：追加消息在显示后消失

2 个答案: