【问题标题】：jQuery .append(), prepend(), after() ... duplicate elements and contents?jQuery .append(), prepend(), after() ...重复的元素和内容？
【发布时间】：2011-11-07 03:35:50
【问题描述】：

在我的代码中，这个命令只运行一次：

jQuery("#commentrating").append('A');

但在 div #commentrating 内部出现了两个“A”元素！什么可能导致此错误？

附： .after() 也有问题：S

【问题讨论】：

请尝试使用jsfiddle.net 重新创建您的问题并发布代码的上下文或提供指向您网站的链接。仅给定这行代码，我们无法为您提供太多帮助。似乎出于某种原因，这条线运行了两次。
这里没有足够的信息，但是听起来导致追加的任何事件都被触发了两次。这通常表明存在逻辑问题，例如在单击事件中绑定单击事件而不解除绑定。第三次点击它会导致添加 AAA 或 AAAA 吗？
我同意 Tentonaxe 的观点。我会在 append 语句之后添加一个 console.log()，然后验证它只被调用一次。
猜测。 .append 用于附加 DOM 对象或 html 字符串，而不是文本字符串。（为此使用 .text）也许 jQuery 正在尝试关闭“A”标签？
事件在 "jQuery(document).ready(function() {" 之后触发，因此没有其他触发器或函数干扰...

标签： jquery duplicates append

【解决方案1】：

两种可能的原因：

（使用 append、appendTo、prepend、prependTo 时。 ..)：

1) 如果您将 2 个 source 元素附加到 1 个 destination 元素，如果您使用：

$("destination").append("source");

jQuery 在你的 html 中找到 2 个 source_div 元素并附加它们。

2) 如果您将 1 个 source 元素附加到 2 个 destination，例如：

$("destination").append("source");

可能在您的 html 中有 2 个 destination 元素：

<div>
    <div class="destination"></div>
    ......
    <div class="destination"></div>
</div>

【讨论】：

【解决方案2】：

可能是由事件冒泡引起的。（只是猜测，只要没有进一步的信息可用）

假设：

<script  type="text/javascript">
jQuery(
  function($)
  {
    $('div')
      .click(function(e)
             {
              $('span',this).append('A');
             }
            );
  }
);
</script>
<div><div><b>click here:</b><span></span></div></div>

如果你点击文本，点击会触发内部div并冒泡到外部div，函数会被执行2次。

为了避免这种情况，请使用 stopPropagation()

<script  type="text/javascript">
jQuery(
  function($)
  {
    $('div')
      .click(function(e)
             {
              e.stopPropagation();
              $('span',this).append('A');
             }
            );
  }
);
</script>
<div><div><b>click here:</b><span></span></div></div>

【讨论】：

事件在 "jQuery(document).ready(function() {" 之后触发，因此没有其他触发器或函数干扰...
ready()中出现了bug，你用的是哪个jquery-version？在 ready-callback 中放置一个 alert 或类似的东西来确定是否调用了 ready 两次。