jqGrid: Link in a cell not clickable, and also not link-like

Question

I have used a custom formatter for one of the columns in my jqGrid. Here is the formatter:

formatter: function(cellvalue, options, rowObject) {
    var link = $('<a>', {
        text: 'Click Me'
        href: '#',
        click: function() {
           alert('sdfsfsd');
           // my stuff
        }
    });

    return link[0].outerHTML;
}

There are two problems:

• The link is not clickable. When I click the link, the row gets selected! Is there a way to not bypass row selection, but also make the link clickable? [Update: I tried using the beforeSelectRow: function(row, e) { return false;} to disable selection. But still not able to click the link. I can see in the html that the cell value is a link indeed.]

• The link is not link like, meaning it is not blue/underlined, as usual it looks like. I have not overidden anything in my CSS.

Help much appreciated!

Thanks Vivek Ragunathan

UPDATE: I found that this is not a problem with the grid as such. But the click handler does not get linked with the hyperlink. I also tried this code instead but no luck!

var link = $('<a>', {
    text: 'Click Me'
    href: '#'
}).click(function() {
   alert('sdfsfsd');
   // my stuff
});

Thanks

Answer 1

Since the link is created dynamically (using jquery), and then the HTML of that object is consumed, the handler will not be part of the HTML. So in this case, the link has to be created out of string directly:

formatter: function(cellvalue, options, row) {
    var handler = "someHandlerDefined(" + options.rowId + ")";
    return "<a href=# onclick='" + handler + "'>Link</a>";
}

That worked!