使用jquery验证在DataTables中使用超链接onClick事件处理程序

Question

我对jquery很新，需要使用超链接onclick事件处理程序。

我正在尝试：在DataTable中显示数据以编辑|删除它。                    如果您查看mRender，我已添加了HyperLink EDIT | DELETE 所以当用户点击这个超链接时。它需要基于onclick事件（getbyID（））来命中函数。但我还没弄清楚它为什么会抛出错误。我错过了什么。谢谢你看看。如果我遗漏了其他信息，请告诉我。

     <script type="text/javascript">
                    $(document).ready(function () {
                    $.ajax({
                        url: 'GetResourceInfo_Json.asmx/ResourceInfoTable',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            $('#datatable').dataTable({
                                //Calling DataTable function
                                //destroy: true
                                modal: true,
                                //aaData: response.data,
                                retrieve: true,
                                paging: true,
                                sort: true,
                                searching: true,
                                //scrollY: 600,  // this will change layout
                                data: data,   //pasing data 
                                columns: [   // passing column 
                                    { 'data': 'Xid' },
                                    { 'data': 'yid' },
                                    { 'data': 'LName' },
                                    { 'data': 'FName' },                                  
                                    { 'data': 'UID' },
                                    {
                                      'mRender': function (data, type, row,meta) {
                                       var id = row.UID;                                                                  
                                       return '<a href="#" type="buttonclick" class="button" onclick="getbyID(' + id + ')">Edit</a>' + '|' + '<a href="#" onclick="Delete(' + id + ')">Delete</a>';
                                        }

                                    }
                                ]

                            });
                        }
                    });
                }


//this never gets hit instead it throws an error.
   $('#datatable').on('click', 'getbyID', function ()
        {
          //to do 
          // call asmx and get the resultset from the proc based on id to 
          // populate the field 
          // hide button for insert 
          // update the field by making the call to asmx and proc to update

        });
}
});
</script>

Answer 1

我看到你的代码确实有额外的大括号：

<script type="text/javascript">
    $(document).ready(function () {
                    $.ajax({
            url: 'GetResourceInfo_Json.asmx/ResourceInfoTable',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                $('#datatable').dataTable({
                    //Calling DataTable function
                    //destroy: true
                    modal: true,
                    //aaData: response.data,
                    retrieve: true,
                    paging: true,
                    sort: true,
                    searching: true,
                    //scrollY: 600,  // this will change layout
                    data: data,   //pasing data 
                    columns: [   // passing column 
                        { 'data': 'Xid' },
                        { 'data': 'yid' },
                        { 'data': 'LName' },
                        { 'data': 'FName' },                                  
                        { 'data': 'UID' },
                        {
                          'mRender': function (data, type, row,meta) {
                           var id = row.UID;                                                                  
                           return '<a href="#" type="buttonclick" class="button" onclick="getbyID(' + id + ')">Edit</a>' + '|' + '<a href="#" onclick="Delete(' + id + ')">Delete</a>';
                            }

                        }
                    ]

                });
            }
        });
    }  // remove this


    //this never gets hit instead it throws an error.
   $('#datatable').on('click', 'getbyID', function ()
        {
          //to do 
          // call asmx and get the resultset from the proc based on id to 
          // populate the field 
          // hide button for insert 
          // update the field by making the call to asmx and proc to update

        });
    } // remove this
    });
</script>

这样它就会变成：

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: 'GetResourceInfo_Json.asmx/ResourceInfoTable',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                $('#datatable').dataTable({
                    //Calling DataTable function
                    //destroy: true
                    modal: true,
                    //aaData: response.data,
                    retrieve: true,
                    paging: true,
                    sort: true,
                    searching: true,
                    //scrollY: 600,  // this will change layout
                    data: data,   //pasing data 
                    columns: [   // passing column 
                        { 'data': 'Xid' },
                        { 'data': 'yid' },
                        { 'data': 'LName' },
                        { 'data': 'FName' },                                  
                        { 'data': 'UID' },
                        {
                          'mRender': function (data, type, row,meta) {
                           var id = row.UID;                                                                  
                           return '<a href="#" type="buttonclick" class="button" onclick="getbyID(' + id + ')">Edit</a>' + '|' + '<a href="#" onclick="Delete(' + id + ')">Delete</a>';
                            }

                        }
                    ]

                });
            }
        });

        //this never gets hit instead it throws an error.
       $('#datatable').on('click', 'getbyID', function (){
              //to do 
              // call asmx and get the resultset from the proc based on id to 
              // populate the field 
              // hide button for insert 
              // update the field by making the call to asmx and proc to update

        });
    });
</script>

以便消除错误。