0

我的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消失。

为什么它不留在页面上？

4

2 回答 2

7

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

于 2013-02-16T19:24:37.260 回答
3

我会大胆猜测并说您正在附加到一个.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]);
            }
        }
    });

});​
于 2012-08-18T21:33:37.323 回答