Question

我已经查看了这个答案：Auto hide bootstrap popover，但它似乎并没有涵盖我的具体情况。

我在窗口加载函数中初始化我的弹出窗口，如下所示：

$(window).load(function(){
  $('#fileArea').popover({
    selector: '[rel=popover]'
  });
});

触发器是表行元素。通常，当用户单击某一行时，项目将添加到队列中。我没有绑定或取消绑定一堆东西，而是设置了两个单独的点击处理程序。一个用于处理没有rel="popover"的表行（并且在执行代码之后，我然后添加rel属性！）和一个用于处理确实具有rel="popover"的表行

这都是花花公子;单独的侦听器成功区分了两种类型的点击。这是用于在具有有效rel属性的元素上显示弹出窗口的代码：

$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
  var $this = $(this);
  $this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
  setTimeout(function() {$this.popover('hide')},3000);
});

因此，弹出窗口已经“初始化”（使用带有#fileArea作为实际侦听器的selector参数），然后在调用popover方法时，传入的参数会创建成功的弹出窗口。 setTimeout也有效！

但后来我发现，如果用户点击了AGAIN，则不会显示弹出窗口。我怀疑它与传递参数有关，而不仅仅是调用void方法或传递字符串'show'。不幸的是，我需要传递参数而不是使用数据属性来存储内容。

从控制台，如果我选择该行，然后在其上调用$el.popover('show')，则会再次显示该弹出窗口。

我目前的想法是，我需要弄清楚该行是否已经配置了弹出窗口（不仅仅是初始化，而是已配置）。但是，我不知道如何找到它以创建一个条件。伪造的代码看起来像这样：

$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
  var $this = $(this);
  if(/* popover is configured */) {
    $this.popover('show');
  } else {
  $this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
  }
  setTimeout(function() {$this.popover('hide')},3000);
});

有人想知道是否配置了弹出框？有没有其他方法可以实现我的目标？

Answer 1

初始化弹出框时，在元素上设置.data()值：

$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
  var $this = $(this);
  if($this.data("popoverInitialized")) {
    $this.popover('show');
  } else {
    $this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
    $this.data("popoverInitialized", true);
  }
  setTimeout(function() {$this.popover('hide')},3000);
});

或者，而不是隐藏弹出窗口，将其销毁：

$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
  var $this = $(this);
  $this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
  setTimeout(function() {$this.popover('destroy')},3000);
});

或者，每次都会显示popover：

$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
  var $this = $(this);
  $this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
  $this.popover('show');
  setTimeout(function() {$this.popover('hide')},3000);
});

延迟后隐藏Bootstrap popover

1 个答案: