store ID from listview in localStorage

问题

I've a listview created by a loop:

for(var i = 0; i < data.length; i++) {
    var garage = data[i];

    $("#content-p").append(
        "<ul data-role=\"listview\">" +
                "<li><a href=\"#\" id=\"submitID\" >" +
                "<h2>"+garage.location+"</h2>" +
                "<p><b>"+garage.description+"</b></p>" +
                "<p>"+garage.address+"</p>" +
            "</a></li>" +
        "</ul><br>"
    );

    $("#submitID").click(function() {
        localStorage.setItem("garageID",garage.ID);
        $.mobile.changePage("#resP");
    });

}

Now the user can click on a listview item and the ID from this item should be stored in the localStorage.

Problem: It first creates the complete listview with all items. If I click now on item#2 from the list, I get the ID from the last item.

回答1:

I think the problem was that the method was trying to reference garage when there wasn't a reference, or something like that. And you should have made the click method for a specific ID, because it just kept getting overridden each time. I fixed it for you by making it one click method for a class, but the ID of each garage element is its actual garage ID.

http://jsfiddle.net/Fq3TF/1/

Also, just a tip, if you're constructing a string which is going to be inserted into an HTML document, you can use an apostrophe instead of a quote to avoid escaping. e.g. "<a class='submitID'>Hello World</a>".

回答2:

the submit function is being overwritten with every iteration of the loop, and every single #submitID is only calling that function. So, of course it will only pull up the last one in the list.

Also, the code is generating all items within data.length, so you'll need to alter that if you don't want everything in the list.

Here's a fix to the first part (assuming no styling is assigned to #submitID):

for(var i = 0; i < data.length; i++) {
    var garage = data[i];

    $("#content-p").append(
        "<ul data-role=\"listview\">" +
                "<li><a href=\"#\" id=\"submitID-" + i +  "\" >" +
                "<h2>"+garage.location+"</h2>" +
                "<p><b>"+garage.description+"</b></p>" +
                "<p>"+garage.address+"</p>" +
            "</a></li>" +
        "</ul><br>"
    );

    $("#submitID-" + i).click(function() {
        localStorage.setItem("garageID",garage.ID);
        $.mobile.changePage("#resP");
    });

}

回答3:

Here is my take on the problem. I use a attribute to save the id in the a element. The registering of the click handler has been moved outside the loop.

var data = [
            {
                id: "id1",
                location: "location1",
                description: "description1",
                address: "address1"
            },
            {
                id: "id2",
                location: "location2",
                description: "description2",
                address: "address2"
            }
        ];

        for (var i = 0; i < data.length; i++) {
            var garage = data[i];

            $("#content-p").append(
                    "<ul data-role=\"listview\">" +
                    "<li><a href=\"#\" class=\"submitClass\" garageid=\"" + garage.id + "\">" +
                    "<h2>" + garage.location + "</h2>" +
                    "<p><b>" + garage.description + "</b></p>" +
                    "<p>" + garage.address + "</p>" +
                    "</a></li>" +
                    "</ul><br>"
                    );
        }

        $(".submitClass").click(function(e) {
            e.stopPropagation();
            alert($(this).attr("garageid"));

            /*localStorage.setItem("garageID", garage.ID);
             $.mobile.changePage("#resP");*/
        });

来源：https://stackoverflow.com/questions/21076202/store-id-from-listview-in-localstorage