Get the text of a href with jQuery Mobile

Question

I am stuck with jQuery Mobile again.

I have a 3x3 set of buttons. What I want is to get its current caption or be able to set its caption dynamically on the click of that button.

But I am not able to do either.

Code :

<!--
                                Board Page
        -->
        <div data-role="page" data-theme="b" id="BoardPage">
            <div data-role="main-page" data-theme="b" id = "tabHolder">
                <div data-role="content">
                    <center>
                        <div class="ui-grid-b" style="position: absolute; top: 38%; width:100%; margin-left:-1em">
                            <div class="ui-block-b">
                                <a data-role="button" id="b1" class="ui-btn" onclick="readClick()">X</a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b2" onclick="readClick()">O</a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b3"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b4"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b5"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b6"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b7"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b8"></a>
                            </div>
                            <div class="ui-block-b">
                                <a data-role="button" id="b9"></a>
                            </div>
                        </div>
                    </center>
                </div>
            </div>
        </div> 

JS code:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <link rel="stylesheet" href="CSS/style.css"/>

        <script>
            $(document).on('pageinit', '#MenuPage', function() {
                $(document).on('click', '#btnExit', function() {
                    navigator.app.exit();
                });
            });

            function readClick() {
                var data = $(this).text();
                alert(data);
            }

        </script>

Answer 1

You are not referencing this in you inline handler. You should either use JavaScript to bind the handler or pass this.

Do

$(document).on('pageinit', '#MenuPage', function() {
    $('#b1, #b2').on('click', readClick)
    $(document).on('click', '#btnExit', function() {
        navigator.app.exit();
    });
});

---

Or

<a data-role="button" id="b1" class="ui-btn" onclick="readClick(this)">X</a>

function readClick(el) {
    var data = $(el).text();
    alert(data);
}

---

Or

<a data-role="button" id="b1" class="ui-btn" onclick="readClick.bind(this)">X</a>

function readClick() {
    var data = $(this).text();
    alert(data);
}