javascript - Dynamicly Added Input is not updating on the screen -

i new javascript bear me here.

i have code below checks text input fields value, if matches fire off custom dialog object/function shows dialog modal window.

now goal clear out text input fired dialog open if cancel button clicked

i have callback function named cancelcallback can pass dialog function.

in example can see have cached input field selector hostnameselector , passed callback.

below can see print out object console. console shows new value text field not update on screen.

this possibly because text input filed dynamicly added screen/dom?

any ideas on how can working? able use latest jquery if needed help

// show notice if hostname matches domain name $(document).on('change','div.hostname > input',function() {      // cached input selector     var hostnameselector = $(this);      var hostname = $(this).val();     var domainname = $("#domainname").val();     var pattern = new regexp(domainname + "$","g");     if ( hostname.match(pattern) != null ) {          var msg = 'are sure want delete action?';          zpanel.dialog.confirm({             heading: 'attention',             message: msg,             width: 300,             cancelcallback: function (hostname) {                     hostnameselector .value = 'hi';                     console.log(hostnameselector);             },             cancelbutton: {text: 'cancel', show: true, class: 'btn-default'},             okbutton: {text: 'confirm', show: true, class: 'btn-primary'},         });      } }); 

cancelcallback should set new value calling:

hostnameselector.val("hi")