Question

我的HTML是：

<body id="bodyMain">
<table id="myTable" class="table-bordered">
<thead>
    <tr>
        <td>UserId</td>
        <td>UserName</td>
        <td>FirstName</td>
        <td>LastName</td>
        <td>PhoneNumber</td>
        <td>Address</td>
        <td>Email Id</td>
        <td>UserType</td>
    </tr>
</thead>
<tbody></tbody>
</table>

我有一个与表myTable相关联的点击事件。它使表格单元格可编辑。现在我需要将一个事件附加到整个主体，检查点击的区域是否不是表格，然后使用表格点击创建的文本框将消失，单元格值将取代它。 js代码是

var globalFlag = '';
var prevValue;
var prevHandle = null;

$('#myTable').on('click', 'tbody tr td', function (e) {    
debugger;
console.log($(this).text());
var rowIndex = $(this).parent('tr').index();
var colIndex = $(this).index();
var index = '' + rowIndex + ',' + colIndex;
console.log(index);
if (globalFlag != index && colIndex != 0) {
    //remove initially created textbox
    if (prevHandle != null) {
        prevHandle.find('input[type="text"]').remove();
        prevHandle.text(prevValue);
    }
    prevHandle = $(this);
    prevValue = $(this).text();
    globalFlag = index;
    var valuepresent = $(this).text();
    var txtsize = parseInt($(this).width());
    console.log(txtsize);
    var txt = "<input type='text' value='" + $(this).text() + 
   "'style='width:" + txtsize + "px'>";
    $(this).text('');
    $(this).append(txt);
}
});
$('body').on("click", function () {
debugger;
var th = $(this).attr('id');
var tb = $('#myTable');
if (th != null || th != undefined)
    if (th.indexOf("myTable") >= 0)
        return;
if (prevHandle != null) {
    prevHandle.find('input[type="text"]').remove();
    prevHandle.text(prevValue);
}
});

无论如何我尝试将这两个事件逐个调用。我需要，如果点击区域不是表格，则禁用编辑单元格数据。我试过了：

$('body >:not(#myTable)').on("click", function () {

但这不起作用。欢迎任何建议。

Answer 1

问题是，click事件会从第一个（表格单元格）处理程序“冒泡”到正文处理程序。

您可以通过添加

来停止此冒泡

return false;

在表格单元格点击事件处理程序的末尾。

这与调用event.stopPropagation：https://api.jquery.com/event.stoppropagation/

相同

顺便说一句，你可以让你的'亲密'处理程序更容易。假设您在表格单元格中显示的唯一输入是您的内联编辑，您可以使用:visible选择器查找输入，例如将删除更改为：

var inp = $("#myTable input[type='text']:visible");
inp.closest("td").text(inp.val());
inp.remove();

这样您就不需要跟踪当前显示的输入。

如何在身体上和身体内的桌子上分别附加点击事件

1 个答案: