2

我在 Bootstrap3 的“popover”中工作。在这里，我放置了如下 HTML 内容，

<a href='#' class='btn' title ='Test' data-trigger='focus' data-
toggle='popover' data-html='true' id = 'testOutside' data-content='<a 
href="#" id="testInside" class="btn">Inside</a>'>Click Here </a>

我无法引用 data-content 属性中存在的 html 元素。

如下图，

$(document).ready(function(){
$('[data-toggle="popover"]').popover();

// the below is not working
$('#testInside').click(function(){
alert('Inside');
});

$('#testOutside').click(function(){
alert('Outside');
});
});

但是引导类正在被应用，在这种情况下，“btn”被应用于锚标记。附加jsFiddle。谁能给我解释一下？

4

4 回答 4

5

shown.bs.popover实际上，使用触发器很容易做到这一点。它将在弹出窗口显示后执行。然后可以add new listeners更新或刷新现有的。

Javascript

$('[data-toggle="popover"]').popover(
    {html:true}
);

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
    $('#testInside').click(function(){
        alert('Inside');
    });

    $('#testOutside').click(function(){
        alert('Outside');
    });
})

HTML

<a href='#' class='btn' title ='Test' data-trigger='focus' data-
toggle='popover' data-html='true' id = 'testOutside' data-content='<a
href="#" id="testInside" class="btn">Inside</a>'>Click Here </a>
于 2015-08-18T06:13:30.267 回答
3

要使其正常工作，您必须确保delay在弹出选项中添加一个小选项，默认值为0. 由于某种原因，这使得这无法正常工作。

从触发弹出框的链接中删除data-content属性，您不需要它，它也不起作用，即使您将html选项中的属性设置为true.

下一步是向触发元素添加一个事件侦听器，它将侦听inserted.bs.popover事件。当模板被添加到 DOM 时，这个会被触发。

此时，您可以创建一个元素，将其添加到弹出框并为其分配单击事件的侦听器。您不必创建元素，也可以使用data-content属性来添加元素。

在这里您可以找到有关 Popover.js 选项和事件的信息

更新！

我刚刚发现实际上只是需要延迟。因此， Parth Shah提到的解决方案也将起作用。

在您单击内部链接之前，似乎正在触发弹出框的隐藏事件。

这就是所有需要的

$('you-selector').popover({
    delay: 100
});


$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    delay: 100 // this is definitely needed !
  });


  $('#testOutside').click(function(){
    alert('Outside');
    console.log('outside');
  });

});

// Listen for inserted template to DOM
$('[data-toggle="popover"]').on('inserted.bs.popover', function () {
  console.log($('.popover-content').find('#testInside'));
  // Create the inside link.
  $inside = $('<a href="#" id="inside">Inside</a>');
  // Add the click event-handler only once
  $inside.one('click', function() {
    alert('Inside');
    console.log('foo');
  });
  $('.popover-content').append($inside[0])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#' class='btn' title ='Test' data-trigger='focus' data-toggle='popover' data-html='true' id = 'testOutside'>Click Here </a>

于 2015-07-19T02:35:17.487 回答
1

当您的文档准备就绪时，DOM 中没有 id 为 testInside 的元素。当您单击#testOutside 时会创建此元素。因此，您创建的任何事件处理程序$(document).ready(...)都是无用的。

所以正确的做法是在#testInside 添加到DOM 之后立即注册一个回调。我们知道当点击#testOuside 时会发生这种情况。

// adding delay over here due to popover close event may trigger before link click event (which happens in Firefox)
$('you-selector').popover({
    delay: 100
});

$('#testOutside').click(function(){
    $('#testInside').click(function(){
        alert('Inside');
    });

    alert('Outside');
});
于 2015-07-19T01:44:38.997 回答
0

我使用showed.bs.popover简单地解决了一个非常具有挑战性的问题，即使我在pophover上有一个评级组件，但问题是评级没有得到悬停事件，因为需要调用这个方法创建评级输入。

$(".rating_product").rating('refresh', 
 {showClear: false,hoverEnabled:true,hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
 });

所以我放了这个，它比插入的功能更有效。

$('[data-toggle="popover"]').on('shown.bs.popover', function () {


          $(".rating_product").rating('refresh', 
            {showClear: false,hoverEnabled:true, hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
          });

})
于 2015-12-08T13:24:43.260 回答