Jquery Mobile - "查找"在ListView中没有按预期工作

时间:2014-06-04 14:15:58

标签: jquery jquery-mobile

我对Find如何处理JQuery Mobile中的listview感到难过。

基本上我想获取用户点击的项目的详细信息(li中的几个字段)。

我可以捕获锚点的click事件并获取锚点的ID(暗示我正在抓取正确的对象,但是当我用find找到该元素时它会返回JS代码。我不确定这是为什么。

这是我为了简单展示我在做什么而构建的示例:                                                            

   <title>Sample</title>

    <script>

        $(document).on("pagecreate","#ListPage", function(){

            console.log("Loading List Page");

            $( "#MyList" ).on( "click", "a.MyLink", function() {
                console.log("delegate called");
                //get gigid from this element

                //this part works....
                var $clickedElement = $(this);
                var IDFromAnchor = $clickedElement.attr('id');
                console.log("ID of anchor = " + IDFromAnchor);

                //since this returns the correct ID I'm assuming that "this" is pointing at the anchor as I expected.

                //now the wheels fall off when I look for stuff inside the anchor...

                //seems like this should work:
                var SelectedTitle = $(this).find("h2").text;
                console.log("Title=" + SelectedTitle);

                //but it doesn't... it returns js code (jquery?)

                return false;
            });

        });

    </script>


</head>
<body>

<div data-role="page" id="ListPage">
    <div data-role="header">
        My Header
    </div>

    <div data-role="main" class="ui-content">

        <ul id="MyList" data-role="listview" data-filter="true" data-inset="true">
            <li>
                <a class="MyLink" id="row1"     href="http://www.google.com">
                    <h2 class="mytitle">this is the title</h2>
                    <div>more content</div>
                </a>

            </li>
            <li>
                <a class="MyLink" id="row2"     href="http://www.google.com">
                    <h2 class="mytitle">this is the second title</h2>
                    <div>more content</div>
                </a>
            </li>
        </ul>

    </div>

    <div data-role="footer" data-position="fixed">
        <h1>Footer Text</h1>
    </div>
</div>


</body>
</html>

提前感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:2)

文字不是属性。它是一种方法。使用text()代替text

var SelectedTitle = $(this).find("h2").text();

请参阅Demo