Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
214 views
in Technique[技术] by (71.8m points)

javascript - Why does this work in jsfiddle but not in my document

I found a wonderful jsfiddle that someone has made and wanted to use part of it in my project:

http://jsfiddle.net/manuel/29gtu/

It works on the jsfiddle but not in my HTML document. Here is what in my document:

<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-1.7.2.js"></script>

<script>

$("button").click(function() {
    var id = $("#id").val();
    var text = "icon-"+id;
    // update the result array
    var result = JSON.parse(localStorage.getItem("result"));
    if(result == null)
        result = [];

    result.push({id: id, icon: text});
    // save the new result array
    localStorage.setItem("result", JSON.stringify(result));

    // append the new li
    $("#bxs").append($("<li></li>").attr("id", "item-"+id).html(text));
});

// on init fill the ul
var result = JSON.parse(localStorage.getItem("result"));
if(result != null) {
    for(var i=0;i<result.length;i++) {
        var item = result[i];
        $("#bxs").append($("<li></li>").attr("id", "item-"+item.id).html(item.icon));
    }
}?

</script>
</head>

<body>
<ul id="bxs" class="tabs"> 
</ul>

<input type="text" id="id" /><button>save</button>
</body>
</html>

The code is copied and pasted from the fiddle. I think it has to do with me not having a plugin for local storage. For that jsfiddle to work, do I need some external plugin that I am missing?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You should wrap your whole code within $(document).ready(function() {...});

So.

<script type="text/javascript">

    $(document).ready(function() {
        $("button").click(function() {
            var id = $("#id").val();
            var text = "icon-" + id;
            // update the result array
            var result = JSON.parse(localStorage.getItem("result"));
            if (result == null) result = [];

            result.push({
                id: id,
                icon: text
            });
            // save the new result array
            localStorage.setItem("result", JSON.stringify(result));

            // append the new li
            $("#bxs").append($("<li></li>").attr("id", "item-" + id).html(text));
        });

        // on init fill the ul
        var result = JSON.parse(localStorage.getItem("result"));
        if (result != null) {
            for (var i = 0; i < result.length; i++) {
                var item = result[i];
                $("#bxs").append($("<li></li>").attr("id", "item-" + item.id).html(item.icon));
            }
        }

    });

</script>

Note

In jsfiddle onLoad mode do that for you, i.e. when you select onLoad from left side panel drop down, then all js code execute after all resources become appeared in the DOM.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...