on click event not firing after sort

[Benjamin]

my onclick event not firing after grid sort.

grid columns markup

columns: [
   
                    {
                        field: "", title: "", width: "150px", attributes: { "class": "ps-0" }, template: function(dataItem) {
                            var actionHtmlContent = '';
                            if (dataItem && dataItem.canEdit) {

                                actionHtmlContent += '<a class="btn btn-link"  href="' + contactDetailLink + '/1/' + dataItem.id + '">';
                                actionHtmlContent += '<em class="material-icons material-edit" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            if (dataItem && dataItem.canDelete) {

                                actionHtmlContent += '<a class="btn btn-link delete-button" title=" " aria-label=" " href="?AppContactID=' + encodeURIComponent(dataItem.id) + ' &handler=Delete">';
                                actionHtmlContent += '<em class="material-icons material-delete" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            return actionHtmlContent;
                        }
                    },
       
    { field: "salutation", title: "Salutation", width: "130px" },
    { field: "fullName", title: "Full Name", width: "200px" },

 

code to attach onclick

$(".delete-button").on("click", function () {
    return confirm('Are you sure you want to proceed?');
});

 

my js tag has nounce, thus i can't add the event listener to the html tag itself.

 

after i sort the grid, when user click on the .delete-button the confirm popup is not showing

[Nikolay]

Hello Benjamin,

The reason for the lost click handler is that the Grid content is re-rendered and the $.on("click") is lost. You need to re-attach it in the sort Grid  event handler or define it with onclick in the template:

template: function(dataItem) {
            return '<a onclick="customClick()" class="btn btn-link delete-button" title=" " aria-label=" " &handler=Delete">Delete</a>';
          }
...
      function customClick() {
        return confirm('Are you sure you want to proceed?');
      }

Dojo demo: https://dojo.telerik.com/QoexeqjA

Regards,
Nikolay
Progress Telerik

[ivory]

I ran into the same issue recently, and it turned out the problem was tied to how the grid re-renders after sorting. When the grid refreshes, it replaces the HTML elements, so the previously attached jQuery click handlers are lost. The best fix is to use event delegation instead of binding directly. Try attaching your handler like this: 

$(document).on("click", ".delete-button", function () {
    return confirm('Are you sure you want to proceed?');
});

This way, the listener remains active even after sorting or refreshing the grid. It’s a simple but effective solution that keeps your onclick events consistent across DOM updates.

 

[Neli]

Hi Ivory,

Thank you very much for sharing your approach with the community. We really appreaciate it. I am sure it will be helpful to the other users in the forum.

Regards,

Neli

[Ashwani]

Another Possible answer is available in this dojo: https://dojo.telerik.com/IpxBxIHk
Here I used databound(), additionally this provides csp complaint code as we should not use 'onclick' event to avoid csp issues.

[Nikolay]

Hi Ashwani,

Thank you for sharing this approach with the community. It is also a valid one.

Regards,

Nikolay