Clickable cell does not call onClick function

Question

How to create an interactive grid cell that can call a JavaScript function?

I presented this as a template for a column template:

'<a href="\\#" class="group-details-popup">#=groupRefId#</a>' 

and then added a function to search for this class and add a click listener:

 $(".group-details-popup", grid.tbody).on("click", function (e) { // do something }); 

but my function is never called when I click on a cell; the values ​​in the cell are displayed as a link, but the event does not fire.

Answer 1

I assume that you get an error when trying to access grid.tbody because it is undefined. You need to wrap it in quotation marks:

 $(".group-details-popup", ".grid tbody").on("click", function (e) { // do something }); 

I assumed that grid is a class, and you want to bind a handler to the tbody elements in this class. Otherwise, your jQuery is fine (if you turned it on correctly):

http://jsfiddle.net/GwYcf/

Answer 2

try it.

 $("a.group-details-popup").click(function () { //your code here } 

Answer 3

Running this method:

 $(".group-details-popup", grid.tbody).on("click", function (e) { // do something }); 

which is equivalent to:

 $(grid.tbody).find(".group-details-popup").on("click", function (e) { // do something }); 

Attaches a click event handler to an existing "group-details-popup" class inside a link to a jQuery grip.tbody element.

To connect to an element that does not yet exist, you will need to bind the event handler to some shell for that element - what holds the element after it is added. One option is a “document,” however a document is not a desirable container if you can get something more precise so that the event handler does not have to process the entire DOM to find the target. You seem to have a wrapper around the elements, so use this.

 $(grid.tbody).on("click", ".group-details-popup", function (e) { // do something });