jQuery:append消息在显示后消失

我的

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>

$(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');
    });
});

.hide-item {
    display: none;
}

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

CSS

看起来像

<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>

$(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');
    });
});

.hide-item {
    display: none;
}

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

只要我点击

Queue

按钮，上面的

jQuery

函数就会启动，它会显示

html

，因为

您还没有向队列添加任何视频

，并且会很快消失

---

为什么它不留在页面上？

我猜测一下，您是在添加一个

.queue\u 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]);
            }
        }
    });

});​

$（'#队列'）。单击（函数（）{
$（“#feature”）.load（“templates/queue.html”，function（）{//callback
var template=$（'.queue_item'）.clone（）；
if（localStorage['queue']！=null）{
$（“.queue_list”）.append（“您尚未向队列添加任何视频”
”；
}否则{
var queue_list=JSON.parse（localStorage['queue']）；
对于（var i=0；i

我注意到您正在使用按钮。你把它们放在表格里了吗？

---

如果您这样做了，浏览器将回发您的页面并刷新您的页面。页面将返回其原始状态。

就是这样！，谢谢@adeneo，这些方法之间有什么区别，比如我的调用是按顺序进行的，但不起作用

load（）

使用ajax

GET

请求加载内容，而ajax是异步的，因此它在后台加载内容，而脚本继续运行。因此，当您在何处添加内容时，内容没有加载到您的站点中，因此您实际上在何处添加了一个元素，该元素在

load（）

稍晚完成时被删除，消息当然会消失。