Get text value from a button s created dynamically jquery

Question

So i am dynamically adding buttons to a table based on array values returned from my generateFolderTree function, problem is i can't seem to get the text value of a clicked button or even get any events when i click the created buttons. How can i get the name of a clicked button? Code below....Thanks

Jquery

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$("#selectFolder").click(runMyFunction);
});
function runMyFunction(){
google.script.run
.withSuccessHandler(successCallback)
.withFailureHandler(showError)
.generateFolderTree();
 $("#hiddenAttrib").hide();
}

function showError(error) {
    console.log(error);
    window.alert('An error has occurred, please try again.');
  }
  function successCallback(returnedArray)
  {
    console.log("returnedArray" + returnedArray);
    var folders = returnedArray;
   console.log("folders" + folders);
    var i = 0;
    //row;
    for( i=0; i<folders.length;i++)
    {
       console.log("i = " + i);
   var row = $('<p><tr><button class = "selectedFolder">' + folders[i] + '</button></tr></p>');
    $("#source").append(row.html());
    }
  }
 $(".selectedFolder").click(function () {
var text = $(this).text();
console.log(text);
$("#dialog-status").val(text);
}); 


</script>

Show.html

   <!-- USe a templated HTML printing scriphlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->

<div>
<div class = "block" id = "dialog-elements">
<button class = "selectFolder" id = "selectFolder" >Select a Folder</button>
</div>
<!-- This block is going to be hidden until the user selects a folder -->
<div class = "block" id = "hiddenAttrib">
<p><label for = "SelectedFolder"> Selected Folder: </label></p>
<p><label id = "foldername"> Folder Name: </label></p>
<p><label id = "folderid"> Folder ID: </label></p>
</div>
<div class = "folderTable" id = "folderTable">
<p><label class = "showStatus" id = "dialog-status">Selected Folder: </label></p>
<table style = "width:100%" id = "source">

</table>


</div>

</div>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('ShowJavaScript').getContent(); ?>

Answer 1

 $('document').on('click', '.selectedFolder', function () {

            alert($(this).text())
        });

Answer 2

Put this piece of code of yours in $(document).ready

$(".selectedFolder").click(function () {
var text = $(this).text();
console.log(text);
$("#dialog-status").val(text);
}); 

Answer 3

use

$(ELEMENT/CLASS/ID).on('click', function(){});

instead of

$(ELEMENT/CLASS/ID).click

click() function doesnt consider elements added to DOM dynamically before we used to use live() for attaching events for dynamically created element but since live() is depreciated we should use on()

on() acts as live()