jQuery .text()方法重复执行，如何使其仅运行一次？

嘿，我来帮你搞定这个jQuery .text()重复执行的问题！结合你给出的ERB代码片段，大概率是这段脚本被嵌入到循环渲染的表格行里，导致每生成一行就执行一次，进而引发.text()重复运行。下面给你几个实用的解决方案：

1. 把脚本移出循环，确保只执行一次 #

看你的ERB代码，mergecommonrows()和setTimeout(addpaidrows,1000)是放在<tr>标签里的——这意味着每渲染一行支付记录，这段脚本就会跑一遍！这绝对是重复执行的元凶。

你应该把脚本移到所有表格行渲染完成之后，只执行一次：

<!-- 先循环渲染所有表格行 -->
<% @payments.each do |f| %>
<tr class="<%= payment_paid(f.paid)%>" id="paidrow"> 
  <td> 
    <% if !f.paid %> 
      <%= check_box_tag "pin_number[]", f.id, checked: !f.paid? %> 
    <%end%> 
  </td> 
  <td class="pin"><%= f.year %></td> 
  <td class="val"><%= f.quarter %></td> 
  <td align="right" class="price"><%= number_to_currency(f.amount, unit: "", precision: 2)%></td>
</tr>
<% end %>

<!-- 把脚本放在循环外部，DOM加载完成后只执行一次 -->
<script>
// 用$(document).ready确保DOM渲染完再执行
$(document).ready(function() {
  mergecommonrows();
  setTimeout(addpaidrows, 1000);
});
</script>

2. 给.text()的执行添加标记（如果是函数内部调用） #

如果你的mergecommonrows或addpaidrows函数里调用了.text()，可以给目标元素加一个自定义数据标记，判断是否已经执行过：

function addpaidrows() {
  // 假设你要操作.price元素的文本
  const $priceElement = $('.price');
  
  // 检查元素是否已经被更新过
  if (!$priceElement.data('text-updated')) {
    // 执行.text()操作
    $priceElement.text('更新后的文本内容');
    // 标记为已执行，避免重复
    $priceElement.data('text-updated', true);
  }
}

3. 用一次性事件绑定（如果是事件触发.text()） #

如果.text()是通过事件（比如点击、hover）触发的，用jQuery的.one()方法代替.on()，确保事件只会触发一次：

// 比如点击#paidrow时只执行一次.text()
$('#paidrow').one('click', function() {
  $(this).find('.some-target').text('仅显示一次的内容');
});

总结 #

最优先的解决方式是把脚本移出循环，避免因为重复渲染DOM导致脚本多次执行。如果还有特定场景下的重复问题，再结合标记或一次性事件绑定的方法，就能确保.text()只运行一次啦！

内容的提问来源于stack exchange，提问作者thepersonwho