Selecting an item with jQuery on Twitter Twitter upload

Question

I post the following content on PopStash Twitter, which contains the link for which I want to listen for clicks:

<div id="popover-content"> <a id="link" href="#">click</a> </div> 

I use the button to open a popover that contains the above content:

 <button id="trigger" data-placement="bottom" title="title">Reveal popover</button> 

Then I bind the button to popover and use the jQuery click() function, trying to listen for clicks on the link contained in popover:

 $(function(){ $('#trigger').popover({ html: true, content: function() { return $('#popover-content').html(); } }); $('#link').click(function() { alert('beep'); }); }); 

However, by clicking a button to open a popover, and then clicking a link, the click does not seem to be detected as described above. My understanding of DOM and javascript and jQuery is pretty limited, so I'm not sure what is going on here. How can you select / listen for actions on elements contained in popover?

Link: Travel Companions in Bootstrap

Answer 1

You do not need to delegate events here. Instead, use $('#popover-content') instead of $('#popover-content').html() when setting the content. This will have logged events by default, without requiring any delegation.

Demo

 $(function(){ $('#trigger').popover({ html: true, content: function() { return $('#popover-content'); //<-- Remove .html() } }); $('#link').click(function() { alert('beep'); }); }); 

Answer 2

You can try the following:

 $(document).on('click', '#link', function(){ alert('beep'); }); 

Answer 3

You can mannuly use popover:

HTML

 <div id="popover-wrapper"> <button id="trigger" data-placement="bottom" title="title">Reveal popover</button> <div class="popover right popup-area popover-pos"> <div class="popover-content"> <div id="popover-content"> <a id="link" href="#">click</a> </div> </div> </div> </div> 

CSS

 #popover-wrapper { .popover { left: auto; right: 0; width: 250px; top: 35px; .popover-content { // .. } } &.open .popover { display: block; } } 

Js

  $('#trigger').hover(function() { $(this).stop(true, true).delay(250).queue(function(next){ $(this).addClass('open'); next(); }); }, function() { $(this).stop(true, true).delay(250).queue(function(next){ $(this).removeClass('open'); next(); }); } );