Bootstrap 3 обратного вызова на скрытое событие не работает - PullRequest
Новая
       67

Bootstrap 3 обратного вызова на скрытое событие не работает

2 голосов
/ 08 февраля 2020

Следуя этому примеру , я попытался реализовать скрытую функцию обратного вызова, но пока show обратный вызов работает отлично, нет способа заставить hidden обратный вызов работать. Может кто-нибудь объяснить, почему это происходит?

Я создал эту скрипку , чтобы повторить проблему. 

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hidden;
  $.fn.popover.Constructor.prototype.hidden = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

ОБНОВЛЕНИЕ

Я создал новый jsFiddle , чтобы показать Christos's Второй фрагмент применяется к Bootstrap jQBTK плагину. Этот плагин использует Popovers Bootstrap для создания виртуальной клавиатуры. Проблема: события привязаны к динамически созданному объекту и поэтому они запускаются несколько раз. Как это можно оптимизировать?

1 Ответ

0 голосов
/ 26 февраля 2020

В hiddenCb функция-прототип называется hide, а не hidden, как в вашем коде, поэтому $.fn.popover.Constructor.prototype.hidden должно быть $.fn.popover.Constructor.prototype.hide.

Эти функции-прототипы методов из popover, а не событий . Есть метод .popover('hide'), но нет метода hidden. Ваш код работает, потому что popover вызывает методы show и hide, а не вызывает события.

Код , который вы нашли , на самом деле является хаком перехватывает / изменяет методы по умолчанию show и hide для запуска ваших функций вместе с кодом по умолчанию popover, что не так идеально, если вы хотите обрабатывать эти события.

Чтобы это работало в вашем коде измените метод hidden на hide: 

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hide;
  $.fn.popover.Constructor.prototype.hide = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

Однако, если вы хотите правильно обрабатывать события show.bs.popover, shown.bs.popover, hide.bs.popover и hidden.bs.popover, вам следует сделать это с помощью on и намного более простой код, подобный этому: 

$(document).ready(function() {
  $("[data-toggle=popover]")
    .popover()
    .on('shown.bs.popover', function() {
      alert('showCb!');
    })
    .on('hidden.bs.popover', function () {
      alert('hiddenCb!');
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

ОБНОВЛЕНИЕ

Для jQBTK вы просто используете click trigger, а затем использовать события. Это вызовет каждое показанное / скрытое событие только один раз: 

$('input').keyboard({
  trigger: 'click',
})
.on('shown.bs.popover', function() {
  console.log('shownCb!');
})
.on('hidden.bs.popover', function () {
  console.log('hiddenCb!');
});

Проверьте это рабочее jsFiffle .

...