Jquery Datatables class not being recognised by jquery in codeigniter

Question

Hi frds I am trying to access the class which I have given to an image in jquery data-tables but there is no response on the browser-side.

Controller:

function load_image(){

    $this->datatables
        ->select('image')
        ->from('details')
        ->add_column('preview', '<img class="preview" width="100" height="100" src ="assets/Data/adv_images/$1">', 'image');

    echo $this->datatables->generate();
}

Using this controller I am able to load the image in the data-table. The following piece of code is loading the data-tables on the browser. When I click on the Image there is no alert dialouge box on the screen. Using web-console I am able to see the image class preview. Why I am not able to get the alert box on click.

$(document).ready(function() {   

          $('#example').dataTable
          ({
            'bProcessing'    : true,
            'bServerSide'    : true,
            'sAjaxSource'    : '<?php echo base_url();?>load_image',
            'iDisplayStart'  : 0,
            'fnServerData': function(sSource, aoData, fnCallback , oSettings)
            {     
              $.ajax
              ({
                'dataType': 'json',
                'type'    : 'POST',
                'url'     : sSource,
                'data'    : aoData,
                'success' : fnCallback,
                'cache'   : false
              });
            }
          });

        $('.preview').click(function(){
                        alert('hi');
                        })
        });

Answer 1

You set the click eventhandler before the datatable wih the preview image is loaded.

Use this instead:

$('#example').on('click', '.preview', function() {
    alert('hi');
});

See the documentation for details.