click function not trigger after sorting / refreshdata

[imjava1974Participant]

Hi ,

I add an image to cell as a clickable image to trigger a function (so that i can pop up a windows to display data related to corresponding row of this cell later).

This is the function
$(‘.detail_btn’).bind(‘click’, function(e)

It works at first, but fails after i click header to sort or call function to refresh grid data.
Any suggestion to work around this?
THanks.

var movies = new Array();

// Avatar
movies[0] = { Image: ‘avatar.png’, Title: ‘Avatar’, Year: 2009 };
movies[1] = { Image: ‘priest.png’, Title: ‘Priest’, Year: 2006 };
movies[2] = { Image: ‘endgame.png’, Title: ‘End Game’, Year: 2006 };
movies[3] = { Image: ‘unknown.png’, Title: ‘Unknown’, Year: 2011 };
movies[4] = { Image: ‘unstoppable.png’, Title: ‘Unstoppable’, Year: 2010 };
movies[5] = { Image: ‘twilight.png’, Title: ‘Twilight’, Year: 2008 };
movies[6] = { Image: ‘kungfupanda.png’, Title: ‘Kung Fu Panda’, Year: 2008 };
movies[7] = { Image: ‘knockout.png’, Title: ‘Knockout’, Year: 2011 };
movies[8] = { Image: ‘theplane.png’, Title: ‘The Plane’, Year: 2010 };
movies[9] = { Image: ‘bigdaddy.png’, Title: ‘Big Daddy’, Year: 1999 };

var imagerenderer = function (row, datafield, value) {
return ‘<input type=”image” style=”margin-left: 5px;” height=”60″ width=”50″ value=”Submit” class=”detail_btn” id=”‘ + row + ‘” title=”View Pic” src=”../../images/’ + value + ‘”/>’;
}

var source = { localdata: movies, datatype: “array” };
var dataAdapter = new $.jqx.dataAdapter(source);
// Create jqxGrid.
$(“#jqxgrid”).jqxGrid(
{
width: 400,
source: dataAdapter,
sortable: true,

rowsheight: 60,
columns: [
{ text: ‘Image’, datafield: ‘Image’, width: 60, cellsrenderer: imagerenderer },
{ text: ‘Title’, datafield: ‘Title’, width: 200 },
{ text: ‘Year’, datafield: ‘Year’ }
]
});
$(‘.detail_btn’).bind(‘click’, function(e) {

e.preventDefault();
var row =$(this).attr(“id”);
console.log(“click on row ” + row);
});

[DimitarParticipant]

Hello imjava1974,

When the grid is re-rendered after sorting or refresh, the images in the columns are created anew. They are no longer the images selected by the $(‘.detail_btn’) jQuery selection (which no longer exist).

A solution is to add your desired click functionality as a JavaScript onclick event directly to the images’ HTML. A similar approach can be seen in the mobile demo Editing.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts