在popover的数据内容中获取HTML标记的元素 [英] Get the elements of HTML tags inside data-content of popover

问题描述

我正在使用Bootstrap3的popover。我在这里放置了如下HTML内容，

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

<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元素。

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

如下所示，

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

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

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

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

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?

推荐答案

要使这个工作，你必须确保添加一个小的延迟到弹出框选项，默认值为 0 。由于某些原因，这使得无法使用。

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

从链接中删除数据内容属性触发弹出窗口，您不需要它，即使您将选项中的 html 属性设置为 true 。

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

下一步是向触发元素添加一个事件监听器，它将监听插入的 .bs.popover 事件。将模板添加到DOM时会触发此项。

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

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

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-content attribute to add your element.

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

Here you can find information on Popover.js options and events

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

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

看起来弹出窗口的隐藏事件正在触发，然后才能点击内部链接。

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

这就是所需的一切

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

这篇关于在popover的数据内容中获取HTML标记的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！