Disable table column click event except having anchor tag in column

Question

I am using jqGrid for displaying the user list. When I clicked in any column, the checkbox shown in first column gets checked.

So to disable this functionality. I have implemented the following and written in gridComplete event, which is working fine for some scenarios.

$('table#user_entries tr td:not(":first-child")').click(function(e) {
      e.preventDefault();
      return false;
});

But it doesn't allow me to click on a link in any column. Please suggest, How I can prevent the click event for all those columns not containing the anchor tag.

There are variable number of columns in the table depending on the layout I am selecting to display.

I don't think any issue with the jqGrid. As if I can assume it as a normal html table, I am looking a solution like:

$('table#user_entries tr td:not("containing any anchor tag")').click(function(e) {
  e.preventDefault();
  return false;
});

Apply all td one class(e.g. tdClickDisable) except the one which has link and then write above method like: `$('table#user_entries .tdClickDisable').click(function(e) {` — Dhwani, Sep 23 '14 at 08:05
Actually, the data is dynamic, I don't know which column can contain the link.. You can assume some text is written in columns, which may also contain anchor tag. — Arun Jain, Sep 23 '14 at 08:08
Do you use `multiselect: true` option and you want that the rows will be selected only if the user click inside of the "multiselect" column (or on the checkbox of the "multiselect" column)? — Oleg, Sep 23 '14 at 08:11
Yes, table is generated dynamically and multiselect property is set to true. — Arun Jain, Sep 23 '14 at 08:15
@ArunJain: It seems to me that [the answer](http://stackoverflow.com/a/7635601/315935) answers on your question. — Oleg, Sep 23 '14 at 08:17
@ArunJain: It seems to me that you goes in wrong direction registarting `$('table#user_entries tr td:not("containing any anchor tag")').click` will modify **all** `` element on the grid which required memory. jqGrid have already **one** `click` event handler on the `` element. The event handler will be called because of event bubbling. So I suggest that you don't register some *additional* event handlers and just uses *existing* event handlers to solve your original problem. Do [the demo](http://www.ok-soft-gmbh.com/jqGrid/MultiselectInFisrtColumn.htm) what you need? — Oleg, Sep 23 '14 at 08:29

score 1 · Accepted Answer · edited May 23 '17 at 12:05

If I correctly understand your problem you uses multiselect: true and you need to prevent selection of rows on click on other columns as "multiselect" column. In other words you need just change the behavior of jqGrid. Preventing of click events is not the goal.

I described in the old answer the way how to implement the required behavior. Just to comment the code from the answer. jqGrid already have one click handler on the <table> element. It's much more effective as registering click handlers on every cell. The grid body will be rebuild on sorting or other refreshing of the grid. So you wrote that you register click handlers inside of grigComplete/loadComplete. It's not so effective.

Event bubbling allows to handle click on every child element without required to register event handlers on every children. During processing of click event jqGrid "ask" beforeSelectRow callback whether the click should follow to selection of the row. So you can decide which clicks follows row selection and which not. e.target is the clicked element. The construct $.jgrid.getCellIndex($(e.target).closest("td")[0]) gives you the index of the clicked column. The cm[i].name is the name of the clicked column. Multiselect column will be created by jqGrid and it have always the name "cb". So the code

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        cm = $self.jqGrid("getGridParam", "colModel");

    return (cm[iCol].name === "cb");
}

allows selection of rows only in case of click on the cell of multiselect column.

The corresponding demo demonstrates the results. It's important that the code get minimal resources of the web browsers and don't change any behavior of click event on any cells of the grid, so it have no side effects.

kapantzak · Answer 2 · 2014-09-23T08:40:03.793

0

Try detecting if there is an anchor inside the clicked td like this: JSFidle

$('table#user_entries tr td').click(function(e) {
    var linkExists = $(this).find('a').length;

    if (linkExists !== 0) {
         e.preventDefault();               
    } 
})

edited Sep 23 '14 at 08:40

answered Sep 23 '14 at 08:32

kapantzak

11,610
4
39
61

1

How comes that you compare `Number` (length) with `Boolean` (`true`)? Moreover, `else` word is useless due to `return` in `if`. – Regent Sep 23 '14 at 08:34
I didn't say it doesn't work. I just mentioned "bad" code. One more thing: `return false` inside jQuery event handler calls both `event.stopPropagation()` and `event.preventDefault()`, so there is no need in additional `e.preventDefault();` – Regent Sep 23 '14 at 08:44

Disable table column click event except having anchor tag in column

2 Answers2