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

Question

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.

Answer 1

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;
  
})

Answer 2

Attaching a click event to the image by using the itemtemplate also works . Check out my code below

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) {
                   
                var $customImage= $('<img src="/images/patient-record.png" class="recordimage" "width="30" height="30" uuid='+value+'>')
                                .click(function () {
                                    window.location.href = '/patientrecord/?useruuid='+value;
                                    
                                });
                            
                    return $customImage;
                
                
             }}         
           
        ]

       

    });

   
             



}