Javascript新手，警报功能无法正常工作

Question

请在下面看到以下代码

<script>
    $(document).ready(function() {
        var oTable = $('#ManageForms').dataTable({

            "bServerSide":true,
            "bProcessing":true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bFilter":true,
            "sServerMethod": "POST",
            "sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
            "iDisplayLength": 2,
            "aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
            "sEcho": 1,
            "columns":[
                {data:"FormName"},
                {data:"FormPath"},
                {data:"FormCIPath"},
                { "data": null,
                    "defaultContent": "<a href='#editBtnModal' id='editBtnFunc' ><i style='color: #666666' class='fa fa-pencil fa-fw fa-2x'></i></a><a href='#' id='deleteBtn'><i style='color: #ff0000' class='fa fa-times fa-fw fa-2x'></i></a>",
                    "targets": -1
                }
            ],
            'fnServerData'   : function(sSource, aoData, fnCallback){
                $.ajax ({
                    'dataType': 'json',
                    'type'    : 'POST',
                    'url'     : sSource,
                    'data'    : aoData,
                    'success' : fnCallback
                }); //end of ajax
            }
        });
    } );
    $('#editBtnFunc').on('click', function(e){
        alert("Hello World");
    });

</script>

当我点击编辑按钮时，它应弹出带有“Hello World”文本的警报。

但它什么都没做..

网格工作精细数据正在显示，按钮很好..当我点击网格中的按钮时，它应该弹出警报，以便我知道功能正常工作。

HTML：

                        <table id="ManageForms" class="table table-bordered table-condensed table-hover table-striped">
                        <thead>
                        <tr>
                            <th>Form Name</th>
                            <th>Form Path</th>
                            <th>Form CI Path</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
<tbody></tbody>
                        </table>

OutPut HTML

<table class="table table-bordered table-condensed table-hover table-striped dataTable no-footer" id="ManageForms" role="grid" aria-describedby="ManageForms_info" style="width: 1618px;">
                        <thead>
                        <tr role="row"><th class="ui-state-default sorting_asc" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 351px;" aria-sort="ascending" aria-label="Form Name: activate to sort column ascending">Form Name</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 324px;" aria-label="Form Path: activate to sort column ascending">Form Path</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 535px;" aria-label="Form CI Path: activate to sort column ascending">Form CI Path</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 258px;" aria-label="Actions: activate to sort column ascending">Actions</th></tr>
                        </thead>
<tbody><tr role="row" class="odd"><td class="sorting_1">Configuration</td><td>#</td><td>#</td><td><a id="editBtnFunc" href="#editBtnModal"><i class="fa fa-pencil fa-fw fa-2x" style="color: #666666"></i></a><a id="deleteBtn" href="#"><i class="fa fa-times fa-fw fa-2x" style="color: #ff0000"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">Dashboard</td><td>#</td><td>admin/dashboard/System</td><td><a id="editBtnFunc" href="#editBtnModal"><i class="fa fa-pencil fa-fw fa-2x" style="color: #666666"></i></a><a id="deleteBtn" href="#"><i class="fa fa-times fa-fw fa-2x" style="color: #ff0000"></i></a></td></tr></tbody>
                        </table>