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.

CodePudding user response：

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.

CodePudding user response：

I found an additional way myself

Add

document.getElementById("save_value").addEventListener("keyup", pwdMeter);

after calling the Dialog widget