每次点击保存时，我的按钮或文本都会重复？

Posted 2023-03-16

【中文标题】每次点击保存时，我的按钮或文本都会重复？

【英文标题】：My button or text keeps duplicating every time I hit save?

【发布时间】：2018-03-07 16:28:03

【问题描述】：

更新我的问题：-)

我有一个表格，我可以在其中编辑使用Ajax 更新的表格。虽然我使用jQuery 来编辑我需要的特定内容，如下所示。

问题的主要原因是每次我点击一个用于保存我为表格编辑的记录的按钮时，它都会添加一个额外的“查看注释”或“无注释”button？

有没有办法阻止重复出现？

$(document).ready(function () 
  $(document).ajaxComplete(function () 
    $(".notescontainer").each(function()

     if (!$(this).text().trim().length) 

         $(this).parent().find('.view-notes').addClass("vw-none");
         $(this).parent().find('.lanotes').prepend('No Notes').addClass('nonotes');

       else 

          var lanotes = $('.lanotes');
          var viewnotes = $('<button class="view-notes" type="button">View Notes</button>');
          $(this).closest('tr').find('.lanotes').prepend(viewnotes);
          $(this).parent().find('.view-notes').addClass("vw-some");
      
    );
  );
);

我认为这个问题与.each 有关？所以每次我点击保存记录的按钮时，它是否因为.each而重新申请？

有什么方法可以确保我的“查看注释”和“无注释”文本和按钮不重复？它检查如果.notescontainer 没有值的行，那么它只显示一次“无注释”文本，并且与查看注释相同。

我希望这很清楚？如果没有，我会尝试改写。

提前致谢。 :)

更新：

我被要求提供一个 jsfiddle。但是，由于我的页面需要ajax 调用和多个jquery 插入，因此这样做太大了。所以我不确定我还能如何分享它？

所以也许我可以通过解释更多来帮助自己缩小解决方案的范围？

如何更改这段代码：

if (!$(this).text().trim().length) 

    $(this).parent().find('.view-notes').addClass("vw-none");
    $(this).parent().find('.lanotes').prepend('No Notes').addClass('nonotes');

还排除该行的任何按钮，其类与vw-none 或vw-some within.lanotes 匹配。这是我的尝试：

if (!$(this).text().trim().length) 
    $(this).parent().find('.view-notes').addClass("vw-none");

    if(! $(this).parent().find('.view-notes').hasClass("vw-none", "vw-some")) 
        $(this).parent().find('.lanotes').prepend('No Notes').addClass('nonotes');
    

 else 

会发生什么

<td id="thenotes" class="lanotes tabledit-view-mode">
    <button class="view-notes vw-some" type="button">View Notes</button>
    <button class="view-notes vw-some" type="button">View Notes</button>
</td>

当我在我的 ajax“保存按钮”上点击保存时，我上面的代码不会检查天气，现有按钮是否已经存在，所以它只是再次添加代码。上面有什么方法可以使用我的 jquery 来检查该表行是否已经出现了带有 .vw-none 或 .vw-some 的按钮，如果出现了，那么它不会加载该表行的代码？

再次感谢！ :-)

【问题讨论】：

如果你能提供一个jsfiddle或代码sn-p会有所帮助

我们肯定需要这个 html 结构

【参考方案1】：

您应该尝试向按钮/无按钮添加一个容器并交换它的内容而不是预先添加它。

类似这样的：

<td id="thenotes" class="lanotes tabledit-view-mode">
   <span class="button-container"></span>
</td>

然后：

$(this).parent().find('.lanotes').addClass('nonotes');
$(this).parent().find('.lanotes .button-container').html('No notes');

这样你的按钮就不会无休止地堆积起来。

P.s：您不应该在会重复的元素上使用 id，例如 <td> 上的 thenotes