Question

我无法找到使其正常工作的正确方法：

我有一张包含多个单元格的表格：

$('tr > td').click(function()

每次单击单元格时，我都会在此单元格中添加一个输入和2个按钮（一个按钮用于验证，另一个用于删除单元格中的所有内容，以便删除输入和两个按钮）

问题是，当我点击删除按钮时，它也会触发

$('tr > td').click(function()

所以它的作用是删除输入和2个按钮，但是将其添加回来。

我需要的是：

如果单元格为空：添加输入+ 2按钮如果单击删除按钮：从单元格中删除输入+ 2按钮单元格只能有1次输入和2个按钮（所以没有多个输入和超过2个按钮）

我一直试图通过使用toggleClass并使用带有hasClass的if语句来使其正确但它永远不会像我想的那样。

感谢您的帮助，希望您能填补我的逻辑缺失。

编辑：

   function remove()
{
    event.stopPropagation();
    $(this).parent().
    $(this).parent().toggleClass('removed');
    $(this).prev().prev().remove();
    $(this).next().next().remove();
    $(this).remove();
}
    $('tr > td').click(function(event)
    {
        if ($(this).hasClass("done") == false && $(this).hasClass("removed") == false)
        {
            $(this).toggleClass("done");
            $(this).append("<input class='form-control' style='height:25px;width:105px;' type='text'></input>");
            $(this).append("<button onclick='remove();' type='button' id='removeUser' class='btn btn-xs'><span class='text-danger glyphicon glyphicon-remove'></span></button>");
            $(this).append("<button type='submit' id='addUser' class='btn btn-xs'><span class='text-success glyphicon glyphicon-ok'></span></button>");
        }

TD只能有1 [输入+ 2buttons]

如果单击删除按钮，则会删除[input + 2buttons]

如果单击TD并且TD为空，请添加[input + 2buttons]

很抱歉迟到是发布时间:)。

Answer 1

event.stopPropagation()

这样可以防止在按钮的父级上触发点击。因此，当您单击按钮时，使用此功能可以避免在td上触发点击

DEMO

如果您删除e.stopPropagation，也会显示div上的提醒。所以，现在你知道如何使用它了。

请记住将我的按钮点击处理程序从.click(function(){...更改为.click(function(event){...或.click(function(e){...，就像我在演示中所做的那样，因此您可以使用该方法。

编辑回答您的编辑

更改此

$('tr > td').click(function(event)
{

到这个

$('tr > td').click(function(event)
{
    event.stopPropagation();

并从event.stopPropagation函数中移除remove()。

Answer 2

event.stopPropagation()

进一步阅读：Event bubling and capturing

Answer 3

试试这个：

$('tr > td').click(function(event){
  event.stopPropagation();

  alert("The  element was clicked.");

});

使用一个父.click（）操作切换输入

3 个答案: