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

问题

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?

回答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>

回答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>

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

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

})

来源：https://stackoverflow.com/questions/31496937/get-the-elements-of-html-tags-inside-data-content-of-popover

标签

jquery

html5

twitter-bootstrap

popover

bootstrap-popover