Question

My queue.html looks like

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

and my jQuery function looks like

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

the CSS looks like

.hide-item {
    display: none;
}

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

As soon as I click on Queue button, the above jQuery function fires up and it displays html as You have not added any video to the queue yet and disappears quickly.

Why doesn’t it stays on the page?

Answer 1

I’ll take a wild guess and say you are appending to a .queue_list element that is replaced with the load() function.

Try doing the appending in the callback when the new content is loaded :

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

});​