I create a simple jquery data table sample , but don't work it's row click event.

it shows data but I want to when I click a row , it shows row's data in alert.

please help me.

my code is:

```
<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite"
    >

<composite:interface>

</composite:interface>

<composite:implementation>

    <style type="text/css" title="currentStyle">
        @import "/resources/css/demo_table.css";
    </style>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function () {

            $('#example').dataTable(
                    {
                        "aLengthMenu": [
                            [2, 5, 10, -1],
                            [2, 5, 10, "All"]
                        ],
                        "processing": true,
                        "ajax": {
                            "url": "/DataTableServlet",
                            "dataSrc": "demo",
                            "type": "GET"

                        }
                    });

            $("#example tbody").click(function(event) {

                $(oTable.fnSettings().aoData).each(function() {
                    $(this.nTr).removeClass('row_selected');
                });
                $(event.target.parentNode).addClass('row_selected');

            });

            $("#example tbody tr").live('click', function(event) {
                var aPos = oTable.fnGetPosition(this);
                var aData = oTable.fnGetData(aPos);
                gIDNumber = aData[0];
               alert(gIDNumber);

            });

            oTable = $('#example').dataTable();
        });

    </script>

    <p:panel header="hello">
        <div id="dynamic">
            <table style="cellpadding:0 ;cellspacing:0 " border="0" class="display"
                   id="example">
                <thead>
                <tr id="zz">
                    <th style="width: 3%">First Name</th>
                    <th style="width: 3%">Last Name</th>
                    <th style="width: 3%">Address 1</th>
                    <th style="width: 3%">Address 2</th>

                </tr>
                </thead>
            </table>
        </div>
        <br/>
        <br/>
        <h:inputText id="asd" value="hello"/>
    </p:panel>

</composite:implementation>

</ui:composition>

```

I think that I must insert click function in out of the $(document).ready... . it is right?