Question

I have the following jQuery:

$('#dataTable').on('click', 'tbody tr', clickHandler);

Here’s the first few lines of my gridClickHander

function gridClickHandler(event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(this).addClass('row_selected');
    var rk = $(this).attr('data-rk');
    var pk = $(this).attr('data-pk');

This code now works very well.

Next I would like to do the same thing as the click event on a row but by using javascript/jQuery code calling the gridClickHandler. For example on a row with an id=”row_25″. Is there a way I can do this? Sorry but again I am confused abut how to deal with the $(this).

Here’s my code:

  if (obj.entity == "City") {
                var html = obj.$form.find("#select-topic").html();
                var indx = obj.$form.find("#select-topic").index()
                $("#input_TempRowKey_" + obj.rownum).html(html);
                $("#input_TempRowKey_" + obj.rownum).eq(indx).attr('selected', 'selected');
                var title = obj.$form.find("#Title").val();
                $("#input_Title_" + obj.rownum).val(title);
                $("tr#row_" + obj.rownum).attr("data-rk", json.rowKey);
                // here I need to do the same as though a user just clicked on rownum
            }

Answer 1

You can set this explicitly by using .call ^[MDN] or .apply ^[MDN]:

gridClickHandler.call(referenceToDOMElement);
// example: gridClickHandler.call($('#row_25').get(0));

Note that the event handler expects this to be a DOM element, and not a jQuery object. Also, if your handler would make use of the event object (event) calling the function like this would of course not work.

The above way lets you execute the handler for any DOM element. But since you want to execute the handler for a row, you can simulate a click on a specific row:

$('#row_24').trigger('click');