单击时的DataTable锚事件不起作用，并返回加载资源失败

Question

首先，当用户单击dataTable的元素时，我已经看到与jquery事件委托事件和事件实时相关的所有内容。 请 ！！！！任何人都可以知道发生了什么！ ，我一直在寻找5小时前的解决方案，没有任何效果。我只想在点击上创建一个获取该行数据的函数（并且我会在之后执行某些操作）

以下是我的代码：我需要一个重要的帮助！谢谢 ：

     <div class="container">
    <div class="table">
        <table id="AppTable">
            <thead>
                <tr>
                    <th>ApplicationName</th>
                    <th>Application Name </th>
                    <th>Application Url</th>
                    <th>Image Name</th>
                    <th>Image</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
        </table>
        <input type="hidden" runat="server" id="H_ApplicationID" />
    </div>
         </div>

<script type="text/javascript">
    //data table of applicaiton
    var appID ;
    var AppTable ;        
    function GetApplications(){         
        $.ajax({
            type:"POST",
            url:"FRM_Application.aspx/GetApplications",
            contentType:"application/json;charset=utf-8",
            success:function(data){                          
                jsonStr = data.d;

                var array = jQuery.parseJSON(jsonStr);                  
                AppTable = $("#AppTable").DataTable({            
                    "seraching":true,
                    "sorting":[[0,5]],
                    "paging":true,
                    "destroy":true,
                    "responsive":true,
                    "data":array,

                    aoColumns:[
                        {"name":"ApplicationID","data":"ApplicationID"},
                        {"name":"ApplicationName","data":"ApplicationName"},
                        {"name":"ApplicationUrl","data":"ApplicationUrl"},
                        { "name": "ImageName", "data": "ImageName" },
                        {"name":"FileUploader","data":"ImageBytes"},
                        {"name":null,"data":null},
                        {"name":null,"data":null}
                    ],
                    aoColumnDefs:[
                        {
                            "aTargets":[0] , 
                            "visible":false                          
                        },

                        {
                            "aTargets":[4],
                            //"render": function (data, type, row) { return data + ' ' + row[0] }
                            //"render": function (data) { return $(".img").attr('src', +String(data.ImageBytes)); }
                            "render": function ( data, type, row ) {return '<img src="'+data.ImageBytes+'" style="width=300px;height=300px;" />'; }
                        },
/attention 
//focus here please 
//this is where i got stuck 
//problems over here Edit anchor 
                        {
                            "aTargets":[5],
                            "searchable":false,
                            "render": function (data) {return "<a class='btn  btn-primary editButton'> Edit </a>"}

                        }, 
//problem because of events                            
                        {
                            "aTargets":[6],
                            "searchable":false,
                            "render":function(data){return "<a class='btn btn-danger' onclick='DeleteApp("+data.ApplicationID+")'>Delete</a>"}
                        }
                    ]            
                });

            }
        });
    }

所以我在dataTables中创建了一个事件，因为jquery站点说创建一个委托函数更好，这个函数不仅在运行时有效，而且每当创建元素时：这里是函数

 $(document).ready(function () {
            GetApplications();
            $("body").on("click", "#AppTable tbody tr .editButton", function (data) {
                $("<%=H_ApplicationID.ClientID%>").val(data.ApplicationID)
                $("<%=txtApplicationName.ClientID%>").val(data.ApplicationName);
                $("<%=txtApplicationUrl.ClientID%>").val(data.ApplicationUrl);
                $("<%=txtImageName.ClientID%>").val(data.ImageName);
            });
        });

Answer 1

好吧我会发布这个作为答案，所以我可以使用代码片段功能，你可以看到下面你可以抓住行，它将返回一个数组，然后你可以做任何你想要的数据，希望它有帮助。

$(document).ready( function () {
  var table = $('#example').DataTable();
  
  $("body").on("click", "#example tbody tr .editButton", function (e) {
    e.preventDefault();
    var row = table.row($(this).closest('tr')).data();
    console.log(row);
    console.log('name',row[0]);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>61</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>63</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>66</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>22</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>33</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>61</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
          <tr>
            <td>Donna Snider</td>
            <td>27</td>
            <td><a href="#" class="editButton">Edit</a></td>
          </tr>
        </tbody>
      </table>
    </div>