javascript - 在动态表中取消注册 jquery 事件
问题描述
我正在处理来自 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');
}
});
});
});
解决方案
从改变
$('.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');
}
});
推荐阅读
- bash - 如何在 if 语句中使用 grep 和逻辑运算符
- python - 多个条件 - 在熊猫数据框中选择行
- sql - 如何限制 SQL 服务器用户仅获取 X 行限制
- python - 如何修复“luigi.worker.TaskException:无法安排非任务”
“尝试执行 luigi 任务时? - angular - ngx-extended-pdf-viewer 打印页面仅显示要打印的 pdf 的最后一页
- wordpress - 是否可以根据 Woocommerce 上的重量为产品设置定价?
- postgresql - 创建扩展 postgis 给出错误:无法打开扩展控制文件“/opt/pgpro/std-11/share/extension/postgis.control”
- android - 无法在android studio中打开运行窗口
- salesforce - CPQ报价线显示多次
- inkcanvas - 手写功能就像 fiinote 手写一样