Assigning jQuery function to anchor tag in datatable

dipan

Hi
I am doing some updation in datatable using ajax request so no page refreshing. While page loads first time it is assigning 2 javascript functions to datatable cell values. Once I add/delete/edit and I am getting json data for datatables and assigning to datatable. While doing this I would like to assign jquery ajax function for anchor tags.

Anchor has class name 'ajaxCall' will have function $(".ajaxCall").click(function (e){}
Anchor has class name 'ajaxCallDelete' will have function $(".ajaxCallDelete").click(function (e){ }

Is there any way to do so in datatables while refilling the data in datatable? I dont want to do when page loads. It is doing right now.

$(document).ready(function() {
        App.init();
                    
           /* datatable init 
            -----------------------------------------------------------------*/
               
            if ($('#data-table').length !== 0) {
                oTable =  $('#data-table').DataTable({ 
                    "columns": [
                              { data: 'callFireId' },
                              { data: 'mediaId' },
                              { data: 'action' }
                          ],
                 "columnDefs": [
                                {"targets": 0,"className": 'text-center'},
                              {
                                  
                                "targets": 1,
                                "render": function ( data, type, row ) {
                                            return '<a name="editAnchor" id="editAnchor" class="ajaxCall" value="'+row.callFireId+'" href="/somewhere/p1.php?action=edit">'+row.mediaId+'</a>'; 
                                            },
                                "className": 'text-center'
                                },
                         
                                {
                                 "targets": 2,
                                 "render": function ( data, type, row ) {
                                return '<a name="deleteAnchor" id="deleteAnchor" class="ajaxCallDelete" value="'+row.callFireId+'" href="/somewhere/p1.php?action=delete">Delete</a>';
                                    },
                                 "className": 'text-center'
                                }
                               ],
                     "responsive": true
                }); 
             }
           
        // end of jQuery calls
         //////set edit mode////////
         function ajaxCallEdit(){  
        $(".ajaxCall").click(function (e){
          //ajax stuff goes here
                } 
        
        //set delete mode
        function ajaxCallDelete(){
        $(".ajaxCallDelete").click(function (e){ 
        //ajax stuff goes here 
        } 
    } );

//refill the data from json
function fillTheDataTable(data){
            oTable.clear().draw();
            oTable.rows.add(data).draw();
}

TIA

dipan

I appreciate if anyone has time to answer this. It will save mine and someone else time in future.
Thanks!

allan

I would suggest you use a delegated event handler for any events that occur on elements in the table. See the events FAQ for details and a link to an example.

Allan