twitter-bootstrap 在popover的data-content中获取HTML标签的元素

Get the elements of HTML tags inside data-content of popover

提问by novice_developer

I am working in the "popover" of Bootstrap3. Here I have placed the HTML contents like below,

我在 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>

I am not able to refer to the html element present inside the data-content attribute.

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

Like below,

像下面，

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

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

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

But the bootstrap classes are getting applied, In this case "btn" is getting applied to the anchor tag. Attaching the jsFiddle. Can anyone explain this to me?

但是引导类正在被应用，在这种情况下，“btn”被应用于锚标记。附加jsFiddle。任何人都可以向我解释这一点吗？

回答by Online-Free-Tools.com

Actually, it is possible to do it easily using the shown.bs.popovertrigger. It will be executed after the popover is shown. It is then possible to add new listenersor refresh the existing ones.

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

Javascript

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

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>

回答by DavidDomain

To get this to work you have to make sure to add a small delayto the popover options, the default value is 0. Which makes this for some reason impossible to work.

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

Delete the data-contentattribute from the link triggering the popover, you don't need that, and it will not work, even if you set the htmlproperty in the options to true.

data-content从触发弹出窗口的链接中删除属性，您不需要那个，即使您将html选项中的属性设置为true.

The next step is to add an event-listener to the triggering element, which will listen for the inserted.bs.popoverevent. This one gets fired when the template is added to the DOM.

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

At that point you can create an element, add it to the popover and assign your listener for click events to it. You do not have to create the element you could as well just use the data-contentattribute to add your element.

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

Hereyou can find information on Popover.js options and events

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

---

---

Update!

更新！

I just found out that it is actually only the delay that is needed. So the Solution mentioned by Parth Shahwill work as well.

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

Looks like the hide event of the popover is being trigger before you can click the inside link.

看起来弹出窗口的隐藏事件在您可以单击内部链接之前被触发。

So that is all that is needed

所以这就是所需要的

$('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>

回答by Parth Shah

When your document is ready, there is no element in the DOM that has an id of testInside. This element is created when you click on #testOutside. Due to this, any event handler you create at $(document).ready(...)is useless.

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

So the proper way of doing this is to register a callback immediately after #testInside is added to the DOM. And we know this happens when #testOuside is clicked on.

因此，正确的做法是在将#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');
});

回答by Daniel Adenew

I made a very challenging problem simply possible using shown.bs.popovereven the thing is i have a rating component on the pophover , but the problem was the rating doesn't get the hover event becuse of this method need to be called on the rating input is created.

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

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

So i put this and it worked than the inserted function.

所以我把这个和它比插入的功能更有效。

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

})