javascript - Call a function from outputted JS in HTML <script> tags -

here html:

<div id="test-div"></div> <button class="a-button">click</button> 

here js/jquery:

function parent() {      alert("parent");      var output = "";      output += "<p>hello world</p>"     output += "<script>$('.a-button').click(function() { parent(); });</script>"      $("#test-div").html(output); }  parent(); 

when run code , click on button class '.a-button' following error in console:

uncaught typeerror: parent not function 

however, when rid of html/script output , put click event outside of parent function so:

function parent() {      alert("parent");      var output = "";      output += "<p>hello world</p>"     //output += "<script>$('.a-button').click(function() { parent(); });</script>"      $("#test-div").html(output); }  parent();  $('.a-button').click(function() {      parent();  }); 

everything works expected.

unfortunately though, not need able call parent function outputted script.

i have tried set plunkr/jsfiddle problem seems neither supports jquery .html(output). appreciated.