jquery bootstrap selector inside popover

Question

I have a bootstrap popover like this :

<span style="cursor:pointer;" data-toggle="popover" data-trigger="manual" data-html="true" data-placement="top" class="label label-primary bootpopover" data-content='<div class="input-group"><input type="text" style="cursor:text;background:none;" class="form-control input-sm" onmousemove="this.select()" value="http://example.com" readonly><span class="input-group-btn"><button class="btn btn-default btn-sm link" data-placement="bottom" data-trigger="hover" type="button">Go<i class="fa fa-clipboard"></i>Go</button></span></div>' title="" data-original-title="<i>Title</i>">Link1</span>

but everytime I try to select link class on jquery it doesn't work.

$( ".link" ).on( "click", function() {
  alert("redirecting");
});

Answer 1

You do not have a .link in the HTML at that point - all you have is a span whose data-content happens to contain an HTML string that contains a .link when put into the document. Either attach the listener when the popover appears, or use event delegation instead:

$(document).on("click", ".link", function() {
  alert("redirecting");
});