当文档准备就绪时，只触发一次appendTo（）（jQuery）

Question

我希望在页面加载时删除动态创建的“onsale”按钮，并在DOM中添加更多内容。

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

我试图将它绑定到jQuery的one（）处理程序，并在一些事件之间切换，例如click，load，ready等。没有任何改变。

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

继承我的代码：

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

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

应移动的元素：

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

在此处查看实时测试环境（向下滚动到底部）：Link

Answer 1

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

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