带有 Bootstrap 弹出框和 FullCalendar 的随机重复内容错误答案

【问题标题】：Random duplicate content bug with Bootstrap popovers and FullCalendar带有 Bootstrap 弹出框和 FullCalendar 的随机重复内容错误
【发布时间】：2015-08-09 00:09:59
【问题描述】：

注意：我知道引导程序中有一个错误会导致弹出框/工具提示调用 content function() 两次，但我认为这里不是这种情况。

我将引导弹出框与 FullCalendar gem 结合使用来更新事件。

在弹出框内，有多个 div 会根据用户所在的视图隐藏/显示（即，有一个用于显示事件信息的视图，另一个用于更新视图）。我的处理方式是使用addClass('hide') 和removeClass('hide')，如果这不正确，请纠正我。

当我点击一个事件时，它会显示一个弹出框，其中包含一次添加的内容（好）。当我导航到弹出框内的更新div 并发送.ajax({type: 'PUT'}) 时，更新事件的弹出框会显示两个内容divs（坏）；但是，这随机发生。

如果我重新加载整个 DOM 并一遍又一遍地重做该过程，这种重复会发生 ~ 一半的时间。

在 DOM 加载后点击弹出框时（好）

在调用ajax PUT 后单击弹出框时，有时会发生（即使没有更改任何字段）

这是我发送 .ajax 请求的方式：

  // SAVE button for LESSONS, POPOVER ***/
  $('body').on('click', 'button.popover-lesson-save', function() {

    var title = $('.popover input.popover-lesson-title').val();
    var note = $('.popover input.popover-lesson-note').val();

    // Retrieve event data from popover
    var idStr = $('.popover div.popover-body').data('id');
    var id = parseInt(idStr);

    // Store event data into a hash for AJAX request and refetches events
    var data = {
      title: title,
      note: note
    };

    // Make PUT AJAX request to database
    $.ajax({
      url: '/lessons/' + id,
      type: 'PUT',
      data: data,
      dataType: 'json',

      success: function(resp){
        $('.popover div.popover-lessons-edit').addClass('hide');
        $('.popover div.popover-lessons-view').removeClass('hide');
        $('.popover').popover('hide');
        $('#calendar').fullCalendar( 'refetchEvents' );
      },
      error: function(resp){
        alert('Error code 2-502-1. Oops, something went wrong.');
      }

    });
  });

这是我在 FullCalendar 回调中所做的：

  // calendar options
  $('#calendar').fullCalendar({
    ..
    eventRender: function(calEvent, element, view){

        if (typeof $(element).data('bs.popover') === 'undefined'){
          // Find content html (append and clone prevents parent div from being overwritten)
          var content = $("<div />").append($('.popover-lessons-content').clone());
          var id = calEvent.id;

          // Attach popover to html element
          $(element).popover({
            container: 'body',
            placement: 'left',
            html: true,
            content: function(){
              return content.html(); // This randomly duplicates
            }
          });
        }
     }
  }

【问题讨论】：

标签： javascript jquery twitter-bootstrap fullcalendar popover

【解决方案1】：

有些东西告诉我，这里不是append()

var content = $("<div />").append($('.popover-lessons-content').clone());

你应该使用appendTo()。但不确定clone() 的用途，所以我认为它应该如下所示：

var content = $("<div />").appendTo('.popover-lessons-content');

为了避免重复，应该在附加之前清除 $('.popover-lessons-content') 东西。

【讨论】：

您的方法似乎不起作用，但如果我可以澄清一下，div 类 .popover-lessons-content 是弹出框的隐藏 html 模板。在控制台中运行$("<div />").appendTo('.popover-lessons-content'); 给了我一个空的[<div></div>]。不过，由于您对 .append() 和 .clone() 的用法的评论，我已经弄清楚了

【解决方案2】：

感谢@c-smile，我意识到错误在于我如何从视图文件中检索我的 html 模板：

var content = $("<div />").append($('.popover-lessons-content').clone());

相反，我应该这样做（经过多次修改后才奏效）：

      var content = $('.popover-lessons-content').html();

      $(element).popover({
        container: 'body',
        placement: 'left',
        html: true,
        content: function(){
          return content;
        }
      });

它需要直接的html而不是克隆div并弄得一团糟。

【讨论】：