Javascript Newbie, alert function not working

Question

please see below code in the end

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

when i click the Edit Button, it should popup the alert with text "Hello World".

But it does nothing..

Grid is working fine data is showing and button is fine.. all i want when i click on button in the grid it should popup the alert so that i can know function is working.

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>

The 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>

Move your `$.on()` call inside the `$(document).ready()` (one line above) and try it. You're adding a handler when I bet the element is not in the DOM yet. — Jared Farrish, Aug 21 '14 at 23:57
Change `id='editBtnFunc'` to a class: `class='editBtnFunc'` because you shouldn't have duplicate id's. Then change `$('#editBtnFunc').on('click', function(e){` to `$('ManageForms').on('click', '.editBtnFunc', function(e){` — Anthony Chu, Aug 21 '14 at 23:57
oh. Thanks totally forgot about that. more then 1 button gets the same ID in the grid. but then if i go for class then all the buttons will have the same class, will it gonna work fine then? — Sizzling Code, Aug 22 '14 at 00:01
@JaredFarrish Sir Its Already inside of `$(document).ready(function() {` i tried it before posting here. tried both outside and inside of document.ready. but no success :( — Sizzling Code, Aug 22 '14 at 00:04
@AnthonyChu Thankyou for picking out my stupid mistake but still it is not working. i mean the alert dont popup.. — Sizzling Code, Aug 22 '14 at 00:05
There's actually a typo in my comment that I can no longer edit. Should be `$('#ManageForms').on('click', '.editBtnFunc', function(e){` or `$(document).on('click', '.editBtnFunc', function(e){`, not sure if that makes a difference. — Anthony Chu, Aug 22 '14 at 00:07
What I'm looking at in your question, the `$.on()` is *not* in the `$.ready()` function. There may be other issues, but that I can see. — Jared Farrish, Aug 22 '14 at 00:08
Is `editBtnFunc` being added dynamically using AJAX? Then you need to use event delegation. — Barmar, Aug 22 '14 at 00:12
@AnthonyChu thanks, i tried `$('#ManageForms').on('click', '.editBtnFunc', function(e){` It worked But i dont get it, why my code didn't worked i am refrencing to same class, but you defined the table id and the class of the button. what changed then?? how it comes to work with this code but not with the previous? — Sizzling Code, Aug 22 '14 at 00:12
@SyedHaiderHassan See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for the reason — Barmar, Aug 22 '14 at 00:13
@AnthonyChu had you use a delegate (using the second argument in the `$.on()` call). This uses the parent to delegate a click down to a child, so it doesn't have to exist in the DOM when event is added. Barmar's link should provide more insight. Note that it *still* needs to be added when the `#ManageForms` element is in the DOM. Here is a demo of the difference: http://jsfiddle.net/L10rb9L5/ — Jared Farrish, Aug 22 '14 at 00:14
@SyedHaiderHassan As the others have explained, the buttons didn't exist when the onclick handler was added, so you need to use delegation to listen for the event on an existing element higher up the DOM (the table or the document). — Anthony Chu, Aug 22 '14 at 00:19

Javascript Newbie, alert function not working

0 Answers0