Unregister jquery event for in dynamic table

Question

I am working for dynamic table from a jquery/ajax function that will display a list of files depending on the clicked category.

Once the list of file is displayed, the user can click on table row (checkbox will also be checked) to display/preview the file but the row can't have a jquery event.

I have tried it on a plain html table with the function below and it worked.

What could be the solution for this?

function directoryAction(obj){
           var directory = obj.value
           var editDer = directory.replace("./","");
           $(".content-main").html("<button class='btn btn-default'><i class='fa fa-folder-o'></i></button>"+
                "<button class='btn btn-default' value='"+ directory +"' onclick='addDocument(this);'><i class='fa fa-upload'></i></button>");
           $(".content-main").append("<h5>"+editDer+"</h5>");
           $(".content-main").append("<table class='record_table'>"+
           "<thead>"+
           "<tr>"+
           "<th class='check'><input type='checkbox' class='form-control '/></th>"+
           "<th>File Name</th>"+
           "<th>Uploader</th>"+
           "<th>Date Modefied</th>"+
             "</tr>"+
             "</thead>"+
             "<tbody class='fileTbody'></tbody></table");
            var dataString = "directory=" + directory + "&getFileInDirectory="
             $.ajax({
                url: "main.php",
                type: "GET",
                data: dataString,
                dataType: "json",
                contentType: false,
                cache: false,
                processData: false,
                success:function(data){
                    var id = 0;
                    $.each(data,function(i,element){
                        var fName = element.namef;
                        var uploader = element.uploader;
                        var datestamp = element.datestamp;
                        var fileId = element.id;
                        $(".fileTbody").append("<tr class='clickRow' id='"+ id + "'><td><input id='file"+ id +"' type='hidden' value='"+ fileId +"'>"+
                        "<input type='checkbox' id='chk"+ id + "' class='form-control'/></td>"+
                        "<td>"+ fName +"</td><td>"+uploader+"</td><td>"+datestamp+"</td></tr>");
                        id++;
                    });
                }
             });
       }

$(function(){
        $(document).ready(function() {
            $('.record_table tr').click(function(event) {
                if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            });
        });
       });

score 0 · Accepted Answer · answered Mar 17 '19 at 03:12

Change from

$('.record_table tr').click(function(event) {
                if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            });

to

$('body').on('click', '.record_table tr', function(event) {
           if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }

});

or

 $('.content-main').on('click', '.record_table tr', function(event) {
               if (event.target.type !== 'checkbox') {
                        $(':checkbox', this).trigger('click');
                    }

    });

Unregister jquery event for in dynamic table

1 Answers1