Question

向我的问题更新到底部： - ）

我有一个表格，可以编辑使用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没有值，那么它只显示一次'No Notes'文本，与View Notes一样。

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

提前致谢。：）

更新

我被要求提供一个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的按钮，如果是，那么它是否没有加载该表行的代码？< / p>

再次感谢！： - ）

Answer 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，例如 thenotes 上的 <td>

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

1 个答案: