how to run and get the value of html submit button on popup in java script

Question

I have created a survey page in html/wordpress then added onBeforeUnload function which run when user close tab or click on some other page now and then I again runs a function if user click on ' stay on this page ' then a popup will open with static text and an input text field for taking the reason of tab closing. Everything working perfectly. Now, I want to add an alert button if user add some text in that text box and click on submit button of that popup. I tried but popup not opening on button click. Can anyone help? please

Here's my JS

var htmlform = '<div class="ppq"><h4>There are lots of benefits in our free profile.  If you are not interested please let us know what we can do to improve.</h2><input type="text" name="ppq_text" id="ppq_text"><input type="button" class="sbmt" name="submit suggestion" id="sbmt_sg" value="submit"></div>'
var timeout;
var popuprun = true;
window.onbeforeunload = function() { 
    if(popuprun == true) {
        var msg ="just one last question?"
        timeout = setTimeout(function() {
            var appendthis =  ("<div class='modal-overlay js-modal-close'></div>");
            $("body").append(appendthis);
            $(".modal-overlay").fadeTo(500, 0.7);
            $('#popup5').fadeIn($(this).data());
            $('.show-full-text-popup5').html(htmlform);
        }, 2000);
        return msg; 
    }
}   

here popuprun is simple variable which will be false on last button click on survey.

And this is my JS for submit button click on popup.

$('#sbmt_sg').click(function(){
    alert('thanks');

Here's the popup which open after 'stay on this page' click

Answer 1

You should delegate the click event on the Submit button to the document , as Submit will not be present in DOM when you bind the event to it.

So,

$(document).on("click", "#sbmt_sg", function(){
   alert("Thanks");
});