使用 jQuery 添加 <div> - 奇怪的点击行为答案

【问题标题】：Adding <div> With jQuery - Weird Click Behavior使用 jQuery 添加 <div> - 奇怪的点击行为
【发布时间】：2012-08-06 20:10:19
【问题描述】：

我在 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 id="last"> 中添加一个新的<div>。它看起来像这样：

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

我该怎么做才能使新的<div>s 仅在我单击“新列表”链接时创建？

谢谢！

【问题讨论】：

标签： jquery html click append

【解决方案1】：

使用.after() 代替.append()。目前，您的新 div 已添加到您的 a 标记中。

【讨论】：

非常感谢！你拯救了这一天！距离我被允许接受你的回答还有 11 分钟。
没问题，容易搞混。

【解决方案2】：

那是因为append() 添加了一个child，而不是一个sibling。所以点击指的是整个容器 myDiv 包含所有添加的 div 并保持可点击。使用after() 添加兄弟姐妹。

【讨论】：