Question

我正在使用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。任何人都可以向我解释这个吗？

Answer 1

实际上，可以使用shown.bs.popover触发器轻松完成。它将在显示弹出窗口后执行。然后可以add new listeners或刷新现有的。{/ p>

的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>

Answer 2

要实现此功能，您必须确保在弹出框选项中添加一个小delay，默认值为0。这使得这个因某些原因无法工作。

~~从触发弹出窗口的链接中删除data-content属性，您不需要它，即使您将选项中的html属性设置为{，它也无法工作{1}}。~~

下一步是向触发元素添加一个事件监听器，该元素将监听true事件。将模板添加到DOM时会触发此问题。

此时，您可以创建一个元素，将其添加到弹出框中，并为您的侦听器分配点击事件。您不必创建您可以使用的元素，只需使用inserted.bs.popover属性添加元素。

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

更新！

我刚刚发现它实际上只是需要的延迟。所以 Parth Shah 提到的解决方案也可以。

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

这就是所需要的一切

data-content

$('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])
})

Answer 3

当您的文档准备就绪时，DOM中没有id为testInside的元素。单击#testOutside时会创建此元素。因此，您在char names[50][33]; char states[50][3];创建的任何事件处理程序都是无用的。

因此，正确的方法是在将#testInside添加到DOM后立即注册回调。我们知道，当点击#testOuside时会发生这种情况。

$(document).ready(...)

Answer 4

我使用 shown.bs.popover 简单地提出了一个非常具有挑战性的问题，即使我在pophover上有一个评级组件，但问题是评级没有得到hover事件因此需要在创建评级输入时调用此方法。

$(".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'}
          });

})

在popover的数据内容中获取HTML标记的元素

4 个答案:

更新！