Bootstrap popovers和FullCalendar

Question

注意：我知道引导程序中存在导致弹出窗口/工具提示两次调用content function()的错误，但我认为不是这种情况。

我正在使用bootstrap popovers与FullCalendar gem一起更新事件。

在popover内部，根据用户所在的视图（即，存在用于显示事件信息的视图和用于更新视图的另一视图），存在隐藏/显示的多个div。我正在处理此问题的方法是使用addClass('hide')和removeClass('hide')，如果这是不正确的，请更正我。

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

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

在DOM加载后点击popover（好）

在调用ajax PUT后点击popover时，此有时会发生（即使没有更改字段）

以下是我发送.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
            }
          });
        }
     }
  }

Answer 1

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

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

你应该使用appendTo()。但我不确定clone()的目的，所以我认为它看起来像：

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

并且为了避免重复，$（'。popover-lessons-content'）事物应该在追加之前清除。

Answer 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并造成大混乱。