I have a JQuery dialog to enable the user to change their password. That all works fine. I check the two passwords are the same and that the new password complies with my minimum standards; and send an Ajax call when the 'save' button is pressed to insert the new password in my database.
I would like to add a strength meter as the password is being entered, so I need an 'keyup' event handler, or the like so that the password is checked as each character is typed. It seems, because the input I want to check is inside the dialog (which is created on the fly), my script
$("#save_value").keyup(function(){
console.log("keyup");
});
is not 'seeing' the element #save_value because it is not there when the page is loaded. I tried adding it to the base page but I guess because it is overwritten, even with the same id, it is invisible to the function above. I have tried placing the code in different places without success. I cannot see how to add it within the dialog function.
What you want to do is to use event delegation. It should be done as follows:
$(document).on('keyup','#save_value',function(){
})
This is how event handling is done for dynamic elements.
I found an additional way myself
Add
document.getElementById("save_value").addEventListener("keyup", pwdMeter);
after calling the Dialog widget