javascript - 单击时的 DataTable anchor 事件不起作用并返回无法加载资源

Question

首先，我已经看到了与 jquery 事件委托(delegate) event on 和 event live 相关的所有内容，以便在用户单击 dataTable 的元素时执行功能。
请 !!!!任何人都可以找出发生了什么事吗! ，我从 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>"}
                        }
                    ]            
                });

            }
        });
    }

所以我从 dataTable 中创建了一个事件，因为 jquery 站点说最好创建一个委托(delegate)函数，该函数不仅在运行时起作用，而且在创建元素时起作用:这是函数

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