onclick事件在链接上不起作用

Question

我在数据表中启用了服务器端处理。 我将以下代码用于数据表：

<script type="text/javascript">
$(document).ready(function() {
   var table = $('#FullDataDisplay').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "server_processing.php",
    "aoColumnDefs": [            
 {
   "aTargets": [ 2 ], // Column to target
   "mRender": function ( data, type, full ) {
     return '<a id=' + full[0] + ' class="edit-link" href="#" title="Edit">' + data + '</a>';
   }
 }
 ]
 } );
} );
</script>

这正确地返回了传递给我的crud.js脚本所需的链接，内容如下：

/* Get Edit ID  */
    $(".edit-link").click(function()
    {
            var id = $(this).attr("id");
            var edit_id = id;
            {
                    $(".content-loader").fadeOut('slow', function()
                     {
                            $(".content-loader").fadeIn('slow');
                            $(".content-loader").load('edit_form.php?edit_id='+edit_id);
                            $("#btn-add").hide();
                            $("#btn-view").show();
                    });
            }
            return false;
    });
    /* Get Edit ID  */

问题是，当单击链接时，什么也没有发生。

Answer 1

由于您是通过AJAX动态加载内容，因此需要使用$(document)

/* Get Edit ID  */
$(document).on('click',".edit-link",function() {
    var id = $(this).attr("id");
    var edit_id = id; {
        $(".content-loader").fadeOut('slow', function() {
            $(".content-loader").fadeIn('slow');
            $(".content-loader").load('edit_form.php?edit_id=' + edit_id);
            $("#btn-add").hide();
            $("#btn-view").show();
        });
    }
    return false;
});
/* Get Edit ID  */