Jquery div删除在一个td问题

Question

我对jQuery和。remove()有一个小问题。

我有一个td在td里面我有一个div。当我点击td时，我想显示div。当它可见时，我可以点击div，点击后它会被移除。

我使用以下javascript代码:

$("td").click(function () {
    $(".dragDiv").show();
});
$("#1").on("click", function () {
    $(this).remove();
});

删除工作正常，但在我调用。remove()后，我不能再次单击td。什么也不会发生。

怎么了?任何帮助，感谢!!

这是一个工作的JSFIDDLE

Answer 1

可以使用toggle函数，更利于阅读代码，而且并不复杂。

$('td').on('click', function() {
    $('#1').toggle();
});

所以，当你在td元素上click时(我们使用on，因为jQuery将来会弃用速记函数)，你会问div#1是否显示。如果不是，则隐藏该元素。

Answer 2

.remove()从字面上删除div。您应该使用.hide()或'。addClass('hide');

Answer 3

单击事件后仍然在td上工作，然后在您删除div之后。问题是div被删除，就像消失了一样。因此，没有什么可显示的，并且随着该元素的消失，那里不再有带有事件的元素。

你可能想躲起来。

$("#1").on("click", function () {
    $(this).hide();
});

简单地将display:none设置为隐藏元素，而不是永久删除它。

这带来了代码中的另一个问题，即div id=1(建议id不要以数字开头)嵌套在td元素中。因此，当div上的click事件发生时，它也会传播到td。这意味着一旦div被显示，它将被隐藏，事件将传播到td并再次显示它，防止它被隐藏。这可能是您的原始问题，为什么删除似乎有效。

为了防止这种情况发生，需要获取事件并调用event.stopPropagation()。jQuery通过使用return false提供了一个快捷方式(除了event.preventDefault())。它看起来像这样:

$("#1").on("click", function () {
    $(this).hide();
    return false;
});

Answer 4

如果您的意图是删除元素(而不是隐藏它)，那么您可能需要查看.detach()函数。它将暂时从DOM中删除元素，并作为参数值可用。

<table border="1">
    <tr>
        <td>test
            <div id="1" class="dragDiv" style="height:100px; width:100px; display:none;">Test</div>
        </td>
    </tr>
</table>
var detachedEle;
$("td").click(function () {
    if(detachedEle){
     detachedEle.appendTo("tr td");   
        $(".dragDiv").hide();
        detachedEle = null;
        return;
    }
      $(".dragDiv").show();
});
$("#1").on("click", function () {
   detachedEle = $(this).detach();
});

http://jsfiddle.net/kz1wmajL/2/