Please reread my answer on your previous question. You should not use $('.GetLink').click
because it registers the link on currently existing a.GetLink
. To be exactly $('.GetLink')
search for currently existing elements, which have the class GetLink
and return array of the DOM elements as jQuery wrapper. By .click
you register separate click handles on every of the element. If the user navigates to second page, sort by some column or makes many other action, the grid body will be recreated. All previously created a.GetLink elements will be removed and new rows (<tr>
elements) with new a.GetLink
will be inserted in the grid body. The elements will have no event handler of cause. You can fix the problem by moving $('.GetLink').click
inside of loadComplete
callback, but I would recommend you to use beforeSelectRow
instead.
I wrote you about beforeSelectRow
already. I explain more detailed here how it works. All elements of HTML page are supports DOM interface, which includes the methods like onclick
. It's important to understand that event processing (event flow) supports event bubbling, which means upward propagation will continue on parent elements up to the Document (see here). Any event handler may call the stopPropagation
method of the Event
interface to prevent further event propagation.
Thus if the user click on internal elements of the table cells then the click
event handlers will be fired not only bound to the elements, but the event handler bound to the parent objects. If you have grid on table#grid
then you can register click handler on the whole grid by usage
jQuery("#grid").click(function (e) {
// e.target represent the DOM element INSIDE of the table
// which was clicked
});
and the event handler will be called on click on any internal element of the grid (for example on <span class="myLink">some text</span>
). The e.target
gives us full information about the clicked element. We can use var $td = $(e.target).closest("td")
or better var $td = $(e.target).closest("tr.jqgrow>td")
to go on top of the DOM hierarchy till the cell of grid. The returned value will be jQuery wrapper to the DOM element, which represent <td>
element. I start the name of the corresponding JavaSvript variable with $
to make the code more readable and to stress that it's jQuery wrapper. Thus $td[0]
will be the DOM element. Every td
DOM element supports cellIndex
property (see here and here). Thus $td[0].cellIndex
is the index of the column clicked and colModel[$td[0].cellIndex].name
is the name of the column, which is clicked (where var colModel = $(this).jqGrid("getGridParam", "colModel")
). If you need to get the rowid (the value of id
attribute of the row <tr>
) then you can use $td.closest("tr.jqgrow").attr("id")
.
The existing code of jqGrid contains the code like
...
var ts = this; // the DOM of the grid
...
$(ts).click(function (e) {
...
var rowid = $(e.target)("tr.jqgrow").attr("id");
...
if ($.isFunction(p.beforeSelectRow)) {
var isAllowSelection = p.beforeSelectRow.call(ts, rowid, e);
if (isAllowSelection) {
...
}
}
})
Thus one don't need to register additional click
handler. One can use beforeSelectRow
callback instead. One should just don't forget to return true
to allows selection of the row.
The demo https://jsfiddle.net/wugfty1o/3/ demonstrates the usage of beforeSelectRow
.