Binding an event to an item in jsGRid not working after first page

I created a Grid using jsGrid library. the code is pasted below. On click of the image, the user should navigate to another page

function fillpatientsGrid(){

    $("#patientsgrid").jsGrid({
        width: "90%",
        height: "600px" ,      
        sorting: true,
        paging: true,
        pageSize: 12,
        data: patientsData,
        controller: {
            loadData: function(filter) {
                console.log("loadData");
            },
        },
        fields: [
            { name: "name", title:"Name",type: "text",readOnly: true,align:"center",width: 120 },
            { name: "DOB",title:"DOB",type: "text",align:"center", width: 70, sorter: function(date1, date2) {
                return new Date(date1) - new Date(date2);
              }},
            { name: "Gender", title:"Gender",type: "text", align:"center",width: 70},
            { name: "Age",title:"Age", type: "number", align:"center", width: 70} ,  
            { name: "LastReportedByDate", title:"Last Visit",type: "text",align:"center", width: 70},
            { name: "createdBy", title:"Created By",type: "text",align:"center", width: 70},
            { name: "uuid", title:"Patient Record",type: "text",align:"center", width: 100,itemTemplate: function(value, item) {
                    return '<img src="/images/patient-record.png" class="recordimage" "width="30" height="30" uuid='+value+'>';
             }}         
        ]

    });

    $(".recordimage").on('click',function(){
        
        var uuid=$(this).attr('uuid');
        window.location.href = '/patientrecord/?useruuid='+uuid;
      
    })
}

I am showing 12 records on each page. But the issue is that after the first page, recordimage click does not works. Let me know how this can be resolved.

a) Click event code needs to be outside of the function.

b) Since the image loaded on each page so use Event delegation

function fillpatientsGrid(){

    $("#patientsgrid").jsGrid({
        width: "90%",
        height: "600px" ,      
        sorting: true,
        paging: true,
        pageSize: 12,
        data: patientsData,
        controller: {
            loadData: function(filter) {
                console.log("loadData");
            },
        },
        fields: [
            { name: "name", title:"Name",type: "text",readOnly: true,align:"center",width: 120 },
            { name: "DOB",title:"DOB",type: "text",align:"center", width: 70, sorter: function(date1, date2) {
                return new Date(date1) - new Date(date2);
              }},
            { name: "Gender", title:"Gender",type: "text", align:"center",width: 70},
            { name: "Age",title:"Age", type: "number", align:"center", width: 70} ,  
            { name: "LastReportedByDate", title:"Last Visit",type: "text",align:"center", width: 70},
            { name: "createdBy", title:"Created By",type: "text",align:"center", width: 70},
            { name: "uuid", title:"Patient Record",type: "text",align:"center", width: 100,itemTemplate: function(value, item) {
                    return '<img src="/images/patient-record.png" class="recordimage" "width="30" height="30" uuid='+value+'>';
             }}         
        ]

    });
}

$(document).on("click",".recordimage",function(){
    var uuid=$(this).attr('uuid');
    window.location.href = '/patientrecord/?useruuid='+uuid;
  
})