追加是复制内容答案

【问题标题】：Append is duplicating the content追加是复制内容
【发布时间】：2018-01-16 23:01:40
【问题描述】：

我正在尝试将内容附加到我的代码中。当我按下一个按钮时，我的 jQuery 再次执行并再次附加。所以我的问题是，有没有办法确保代码只执行一次？或者如果有办法只追加一次？

$(document).ready(function() {
  var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>';
  $('.extend-guarantee').append(uspar); 
});



<form class="extend-guarantee">
  <span class="checkbox">
    <input type="checkbox">
    <span class="opt-name">Testing checkbox</span>
    <span class="icon-click"></span>
  </span>

【问题讨论】：

查看您的 HTML 和按钮单击处理程序会很有帮助
没有迹象表明内容附加在点击事件上？此代码最初运行（仅一次）？尽管如此，我们需要更多的上下文
JQuery 在页面加载时只执行一次。可能你已经在你的 HTML 或类似的东西中包含了这个脚本两次。
@Endless 是给我的吗？如果是这样，则 OP 声明 When I press a button my jQuery executes again...

标签： javascript jquery duplicates append

【解决方案1】：

如果我正确理解了您的问题，您可以尝试这样的方法。

在下面的代码中，您创建了一个名为 appendToDom 的函数。您在单击按钮时调用它，它会将 id 为 usparDiv 的 div 及其所有内容（如函数中定义）附加到 DOM（在这种情况下，内容附加到主元素，如 appendToDom 中所指定)。

appendToDom 函数还可以检查以确保只添加一次内容（通过检查是否存在 id 为 usparDiv 的 div）。如果是，则返回并结束执行。如果没有，它会将 div 附加到 DOM。

https://jsfiddle.net/eulloa/2a3ee3te/

$(document).ready(function() {
  $('button').on('click', appendToDom)
});

function appendToDom() {
  if ($('#usparDiv').length)
    return;

    var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>';
  $('main').append(uspar);
}

您当前的 jQuery 代码只会执行一次，因为它是在 DOM 准备就绪时定义的（document.ready）。这样，您的附加逻辑将在单击按钮时起作用，而不仅仅是在 DOM 准备好时。

【讨论】：