使用jQuery添加<div> - 奇怪的单击行为</div>

Question

我在jQuery中遇到了appendTo()的奇怪行为。

这是我的JS：

$(document).ready(function() {
    $("a#mydiv").click(function () {
        $(this).append('<div class="well">Added div</div>' );
        $(this).appendTo(div.last);
    });
});

我的HTML：

<div id="last">
    <center><a id="mydiv"><h3>New List</h3></a></center>
</div>

显然，当我点击“新建列表”链接时，我会将新<div>添加到<div id="last">。它看起来像这样：

如果我继续点击New List，我的<div>会越来越多。这可以。但是，当我单击其中一个新创建的<div>时，它还会添加一个。 （当我点击“添加div”灰色空间）。我将把文本框放在这些新的<div>中，并且我不希望它在用户点击键入时添加越来越多的<div>。

点击“新建列表”链接后，如何才能创建新的<div> ，我该怎么办？

谢谢！

Answer 1

使用.after()代替.append()。目前，您的新div正在添加到您的标签中。

Answer 2

这是因为append()添加了孩子，而不是兄弟。因此，点击是指整个容器 myDiv ，其中包含所有添加的div并且仍然可以点击。 使用after()添加兄弟。