Jquery click function not working for the button inside popover

Question

I am trying to alert an message when clicked on button with id tagit . but the whole form is appearing in the bootstrap popover. i also added the jquery for alerting message,but its not showing any alert dialog boxes,but when i call the same thing in javascript it is showing the alert. but i need it to be in jquery. how can i do this?

var htmlcont ='<table class="pop-table"><tr><td><button class="btn btn-warning" id="tagit">FILTER</button></td></tr></table>';

$('[data-toggle="popover"]').popover({content: htmlcont, html: true});    

$("#tagit").click(function(){
      alert("hello this is working");           
});

Answer 1

You need to use event delegation , like so

$(document).on('click', "#tagit", function() {
   console.log("hello this is working");           
});

Answer 2

Event delegation for dynamic created DOM elements. Try to use Immediate parent selector to traverse easily and quickly

$(document).on('click', '#tagit', function() {

}):