文档准备就绪时仅触发一次appendTo（）（jQuery）

我想在页面加载时删除动态创建的“onsale”按钮，并将其更多地放在DOM中

但是由于有3个元素拥有这个类，他为每个元素触发了3次，并在每个位置添加了3个“onsale”按钮

我尝试将它绑定到jQuery的one（）处理程序，并在一些事件之间切换，如单击、加载、就绪等。没有任何变化

还尝试使用计数器或仅通过length（）计算元素，但与以前相同

这是我的代码：

$('.onsale').one('click', function () { 

    $('.onsale').appendTo('.woocommerce-loop-product__title');
    console.log('fired!');
});

<span class="onsale">Angebot!</span>

应移动的元素：

$('.onsale').one('click', function () { 

    $('.onsale').appendTo('.woocommerce-loop-product__title');
    console.log('fired!');
});

<span class="onsale">Angebot!</span>

Angebot！

---

请参见此处的live test environment（向下滚动至底部）：

您只需要使用选择器绑定第一个元素：

$( document ).ready(function() { 
   $('.onsale:first').appendTo('.woocommerce-loop-product__title');
});

---

您只需要使用选择器绑定第一个元素：

$( document ).ready(function() { 
   $('.onsale:first').appendTo('.woocommerce-loop-product__title');
});

---

这也是同样的道理。输入3个销售按钮。看一看这个实时示例。您可以使用

$（document）.ready（）

或

$（window）。在jQuery中的（“load”，function（）{…}）

上，参考链接上的文档以了解什么适合您的需求：这也是一样的。输入3个销售按钮。看一看这个实时示例。您可以使用

$（document）.ready（）

或

$（window）。在jQuery中的（“load”，function（）{…}）

上，请参阅链接上的文档以了解什么适合您的需求：