CODEWITHSUNDEEP
jqueryjquery-mobile
Samantha
Samantha

Reputation: 43

Jquery Mobile - "Find" not working as expected in ListView

I am stumped by how Find is working on a listview in JQuery Mobile.

Basically I want to grab the details (several fields within the li) of an item that was clicked by a user.

I can catch the click event of the anchor and grab the ID of the anchor (implying that I'm grabbing the right object, but when I look inside that element with a find it returns JS code. I'm not sure why.

Here is a sample that I built to simply show what I am doing: 

   <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>

Thanks in advance for any help that you can provide.

Upvotes: 0

Views: 93

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

text is not an attribute. Its a method. USe text() instead of text

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

see the Demo

Upvotes: 2

Related Questions