Question

我创建了一个简单的jquery数据表示例，但是没有使用它的行点击事件。

它显示了数据，但我希望当我点击一行时，它会在警告中显示行的数据。

请帮帮我。

我的代码是：

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

我认为我必须在$（document）.ready ...中插入click函数。这是对的吗？

Answer 1

试试这个，

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

            });

Answer 2

我认为我必须在$（document）.ready ...中插入click函数。这是对的吗？

没有正确的方法可以使用它，但如果你有version 1.9+，你还没有发布你的jQuery版本，那么你必须使用.on() jQuery方法委托事件：

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

使用.on()，因为在.live()版本的jQuery中删除了1.9+。

Try reading about event delegation.

jquery datatable行单击不工作

2 个答案: