单击 Dynamic Popover 的关闭按钮时调用自定义函数

Question

我在自定义插件中有动态弹出窗口。

(function($) {
  $(voiceIMage).popover({
    placement: 'bottom',
    html: 'true',
    title: '<span class="text-info"><strong>title</strong></span>' +
      '<button type="button" id="close" class="close" onclick="closePopover(event)">&times;</button>',
    content: 'test'
  });

  function closePopover(e) {
    console.log('Done')
  }
}(jQuery));

以上代码无效。我如何在动态弹出窗口的关闭按钮单击上应用此 closePopover() 函数。

Answer 1

问题是因为从 onclick 属性调用的函数需要在全局范围内可用。因此，您需要将 closePopover() 函数的定义移动到该级别（即在 IIFE 之外）。

但是，更好的解决方案是在元素关闭时使用从 Bootstrap 弹出窗口本身引发的事件：

(function($) {
  $(function() {
    $(voiceIMage).popover({
      placement: 'bottom',
      html: 'true',
      title: '<span class="text-info"><strong>title</strong></span><button type="button" class="close">&times;</button>',
      content: 'test'
    }).on('hidden.bs.popover', function() {
      console.log('Done')
    });

    $('.close').click(function() {
      $(voiceIMage).popover('hide');
    });
  });
}(jQuery));

有关弹出窗口可用事件的详细信息，请参阅 documentation

单击 Dynamic Popover 的关闭按钮时调用自定义函数

Call Custom function on Close button click of Dynamic Popover

jquery

jquery-plugins

twitter-bootstrap-3