Dynamic Link & Button Click on a different page

Dynamic Link & Button Click on a different page

Hi all, i have a list view with a dynamic list being created like below. This works fine but, when the page appears, i am not able to click on the buttons on the new page (approveDetails.aspx). What am i missing? Thanks for help.

<% Response.Write("<li><small>" & dr.Item(1) & ", " & dr.Item(2) & "<a href= ""#approveDetails.aspx?invoice=" & dr.Item(3) & "&id=approve_reject" & dr.Item(3) & """></a></small></li>")%>

approveDetails.aspx (attached)

<script type="text/javascript">
    function pageLoad() {
        alert('naveend');
    }

    $(function () {
        $('button').click(function () {
            alert('button clicked');
        }
      );
    });

    $(document).ready('button').click(function () {
        alert('button clicked');
    });
</script>
            

<div class="ui-grid-a">
                <div class="ui-block-a">
                    <a href="#" data-role="button" data-theme="b" id="approvelink" data-icon="check">Approve</a></div>
                <div class="ui-block-b">
                    <a href="#" data-role="button" data-theme="b" id="rejectlink" data-icon="delete">Reject</a></div>
            </div>
            <a id="button" data-role="button">Click Button</a>