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

Question

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>

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

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?

Dacca

Your question is vague. – Trope

Answer 1

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.

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.

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.

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.

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

---

Update!

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.

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>

Colatitude

Attaching the correct answer solution - jsFiddle – Dacca

Answer 2

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

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>

Rabkin

Answer 3

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.

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.

// 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');
});

Veld

Unfortunately this is not true, even if it seems to be obvious. The string inside the data-content attribute is just a string and it gets added with $.text() method. But that is not all, event if you force the popup to use $.html() it will still not work. – Colatitude

@Colatitude I am sorry but I disagree with what you are saying. Here is a JsFiddle demonstrating my answer: jsfiddle.net/parthsha/8zs660na/1 – Veld

Copy your fiddle link, open a new browser window and you will see that in chrome it will only work after clicking the trigger a second time and in firefox it does not work at all. – Colatitude

@Colatitude you are correct. And I have learnt a new thing today. Thank you sir! – Veld

No problem, happy coding. ;-) – Colatitude

Thanks for your response. Both of your answers are working for me on Chrome browser, but as DavidDomain answer is more detailed and browser independent I am choosing his as the correct one. – Dacca

Answer 4

I made a very challenging problem simply possible using shown.bs.popover even 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.

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

})

Scaphoid