Reputation: 251
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');
})
});
Upvotes: 0
Views: 124
Reputation: 17560
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.
Upvotes: 1