获取单击的列表视图项的值

时间:2014-02-13 06:40:31

标签: jquery listview jquery-mobile

我这里有一个listview的示例代码,其中包含项目,并在单击一个项目后重定向到另一个页面,但是我希望在重定向到另一个页面时获取我在listview中单击的项目的值。我猜这需要触发一个函数才能获得值,但我不知道从哪里开始。

这是我的代码:

<div id="ContentPage" data-role="page" >

    <div data-role="content">
        <ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Contents" data-inset="true">
            <li><a href="#EditPage">apples</li>
            <li><a href="#EditPage">cats</li>
            <li><a href="#EditPage">bears</li>
            <li><a href="#EditPage">cat</li>
            <li><a href="#EditPage">dog</li>
            <li><a href="#EditPage">tiger</li>
            <li><a href="#EditPage">chicken</li>
        </ul>
    </div>

</div>


<div id="EditPage" data-role="page" >

    <div data-role="header" data-position="fixed">
        <a href="#ContentPage" data-role="button" data-icon="back">BACK</a>
    </div>

    <div data-role="content">
            //i want to display the item i clicked from the listview here
    </div>

</div>

我现在遇到这个问题,有点困惑。任何帮助或建议都会很乐意接受。提前谢谢。

2 个答案:

答案 0 :(得分:2)

您可以使用click()来处理点击事件

$('#viewlist li').click(function(e){
   e.preventDefault();
   alert($(this).text());
});

Fiddle Demo

使用 e.preventDefault() 阻止点击事件的浏览器默认操作。

答案 1 :(得分:0)

<title></title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

              
                           

     <script type="text/javascript">


       var jsonCategory = '{"Categories":[{"category_id":"1", "car_name":"BMW"},{"category_id":"2", "car_name":"Chevrolet"},{"category_id":"3", "car_name":"Toyota"}]}';

                        var json_parsed = $.parseJSON(jsonCategory);

                        for (var u = 0; u < json_parsed.Categories.length; u++){
                            var cars= json_parsed.Categories[u];


         $('#categoryList').append('<li  data-categoryId = "'+cars.car_name+'"> <a href="#" >' + cars.car_name+ '</a>' );

            }
$('#categoryList').delegate('li', 'click', function() {
    var x = $(this).data('categoryid');
    alert(x);
});

                </script>                    


            </ul>


    </div>