Question

我正在通过jquery / ajax函数处理动态表，该函数将根据单击的类别显示文件列表。

显示文件列表后，用户可以单击表行（也将选中复选框）以显示/预览文件，但该行没有jquery事件。

我已经在具有以下功能的纯html表格上尝试了它，并且它起作用了。

对此有什么解决方案？

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

Answer 1

更改自

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

到

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

});

或

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

    });

注销动态表中的jQuery事件

1 个答案: