Question

我使用的是简单的JQuery Mobile页面，如下所示：

<div data-role="page" id="myuploads">
    <div data-role="header" data-id="header" data-position="fixed">
         <div data-role="navbar">
            <ul>
            </ul>
        </div><!-- /navbar -->
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="a" id="myuploadlist">
        </ul>
    </div>
    <div data-role="footer">
    </div>
</div>

然后我运行这个javascript代码来填充页面列表，并应用on click功能。这会将用户带到另一个页面以显示已上载的图像。它通过列表项的ID执行此操作，然后将其存储在localstorage中并用于填充页面。

 $("#myuploads").live("pageinit", function() {

//retrieve details from local storage (logged in)
var userid = JSON.parse(localStorage.getItem("userid"));

console.log(userid);

//serialise post data manually
var postData = 'userid=' + userid;

$('body').addClass('ui-loading');

$.ajax({
    type: 'POST',
    data: postData,
    url: 'MYURLREMOVED',
    success: function(data){
        $('body').removeClass('ui-loading');
        //alert("success");
        $('#myuploadlist').append('<li>Active</li>');

        for (var i = 0; i < data.length; i++) {
            $('#myuploadlist').append('<li><a href="index.html#image" id="' + data[i].Details.File + '">Upload: ' + data[i].UploadID + ' - ' + data[i].Details.TotalViews + ' Views</a></li>');
        }
        $('#myuploadlist').listview('refresh');
    },
    error: function(){
        $('body').removeClass('ui-loading');
        //alert("failure");
        $('#myuploadlist').append('<li>Cannot Load Uploads</li>');
        $('#myuploadlist').listview('refresh');
    }
});

$('#myuploadlist').on('click', 'a', function() {
    var elementID = $(this).attr('id');
    $(document).on('click', '#'+elementID, function(event){
        if(event.handled !== true) // This will prevent event triggering more then once
        {

            localStorage.setItem('selectedImage', elementID);
            //console.log("stored: " + localStorage.getItem('selectedImage'));
            //The below code is handled in a href when list is generated
            //$.mobile.changePage( $("userprofile"), "slide", true, true);
            event.handled = true;
        }
    });
});

}）;

这只是第一次有效。当我单击后退并单击新列表项时，它仍然显示以前显示的图像。我知道列表ID已正确分配。

这是实现我想做的正确方法吗？无论如何可以看到我的事件的问题？感谢。

JQuery Mobile - 列表项的单击事件不变

0 个答案: