Question

我在一些静态元素中的点击操作中显示并隐藏了一个弹出窗口：

$('.check-out-cell').click(function() { // Close other popovers
    $('.popover').remove();
});

var newPopoverTemplate = '<div class="popover ...</div>';
$('.check-out-cell').popover({
    template: newPopoverTemplate,
    html: true,
    content: function() {
        console.log("asd");
        return $(this).parent().find('.content').html();
    }
});

$('.check-out-cell').click(function() {
  var popover = $(this).parent().find('.popover');
  configureSelectize(popover);
  configureDatepickers(popover);

  // Updates the dates in case they were modified
  popover.find('.start-date-input').val($(this).attr("data-start-date"));
  popover.find('.end-date-input').val( ymd(moment($(this).attr("data-end-date")).add(1,'days')));

  popover.find('.input-daterange .date-input').on('changeDate', function() {
  validateReservationDates($(this.form).find('.start-date-input'), $(this.form).find('.end-date-input'));
});

function configureSelectize(context) {
  context.find('.input-tags').selectize({
      delimiter: ',',
      persist: false,
      create: function(input) {
          return {
              value: input,
              text: input
          }
      }
  });
}

function configureDatepickers(context) {
  context.find('.input-daterange').datepicker({
      autoclose: true,
      format: "yyyy-mm-dd",
      orientation: "top",
      todayBtn: "linked",
      language: $('html').attr('lang')
  }).on('show', function(e) {
    $(".datepicker").css("top", $(e.target).outerHeight() + $(e.target).offset().top);
  });
  $("body").scroll(function() {
    $('.input-daterange').trigger('show');
  });
}

当我的“结账单元格”未被修改时，这非常有效。在某些时候，我删除它并动态生成新的。我可以像这样委托click（）的动作：

$(document).on('click', '.check-out-cell', function() {
    $('.popover').remove();
});

var newPopoverTemplate = '<div class="popover ...</div>';
$('.check-out-cell').popover({
    template: newPopoverTemplate,
    html: true,
    content: function() {
        console.log("asd");
        return $(this).parent().find('.content').html();
    }
});
$(document).on('click', '.check-out-cell', function() {
  var popover = $(this).parent().find('.popover');
  configureSelectize(popover);
  configureDatepickers(popover);

  // Updates the dates in case they were modified
  popover.find('.start-date-input').val($(this).attr("data-start-date"));
  popover.find('.end-date-input').val( ymd(moment($(this).attr("data-end-date")).add(1,'days')));

  popover.find('.input-daterange .date-input').on('changeDate', function() {
  validateReservationDates($(this.form).find('.start-date-input'), $(this.form).find('.end-date-input'));
});

它识别单击但不显示弹出框。事实上，点击两次后，console.log("asd");会显示两次。

我错过了什么？

Answer 1

好吧，显然我已经设法让这个工作，只需要用这些小块来改变popover部分：

var popOverSettings = {
  template: newPopoverTemplate,
  html: true,
  selector: '.check-out-cell',
  content: function () {
    return $(this).parent().find('.content').html();
  }
}
$('body').popover(popOverSettings);

importante部分是选择器字段，它告诉popover要激活哪个元素。

如何在动态添加的元素上切换Bootstrap popover

1 个答案: