Using Kendo Grid - onclick requires an extra click to call a jquery method

Question

I have 7 columns (using html Kendo Grid), and the ID column is a PK of each row and its visible(false). So.. When you click on any "Name" data, it grabs a PK(the ID that is invisible) of the row you selected, and a modal screen will pop up so you can see more detailed information.

Currently, it is working as expected, however, when the page loads for the first time, I have to double click it to make the modal screen display. Once the modal screen displays, after that, onclick event works as intended.

But I just noticed that when I hit the F12 key to see the log, the number of click increments(like... x2 x3 etc.) everytime onclick event calls.

When I Debug, it hits the debug point in my code but disappears right away so its really hard for me to investigate.

Thank you for your help.

------Column that has the onclick event--------

Columns(columns => {columns.Bound(o => o.SiteID).Visible(false); 
columns.Bound(o => o.Name).Title("Your Name").HeaderHtmlAttributes(new {title = "Name(s)"}).ClientTemplate("<a class='nameLink' onclick=\"EditSite(#:SiteID#);\" style='cursor:pointer;' SiteID=\'#=SiteID#\'>#=Name#</a>");

----Jquery onclick event ------

function EditSite(SiteID) {
debugger;
$('.nameLink').on('click', function () {

    $('#popUpEdit').dialog({
        width: 1000,
        height: 920,
        show: 'fadein',
        hide: 'fadeout',
        buttons: { "Close": function () { $(this).dialog("close"); } },
        close: function () {
            $("#popUpEdit input").val("");
            $('#popUpEdit input').prop('checked', false);
            $('#statusMessage').html("");
        }
    });
    NameDetails(SiteID);
});

};

Answer 1

You are binding an onClick function every time the EditSite function is called. Try using .off() to unbind any existing handlers.

$('.nameLink').off().on('click', function () { }

Also try wrapping your function so you can pass your SiteID parameter.

(not sure the proper syntax for this)

onclick="EditSite(#:SiteID#)"

Wrapping the function

function EditSite(SiteID) {
  return function() {
      $('#popUpEdit').dialog({
        width: 1000,
        height: 920,
        show: 'fadein',
        hide: 'fadeout',
        buttons: { "Close": function () { $(this).dialog("close"); } },
        close: function () {
            $("#popUpEdit input").val("");
            $('#popUpEdit input').prop('checked', false);
            $('#statusMessage').html("");
        }
      });
      NameDetails(SiteID);
  }
}