jQuery dialog input not working

Question

I'm creating a dialog, below, to receive a name to publish something under. On the third line I initialize the input field to the last name used. The problem is, if I enter a new value and click Publish, when the Publish function reads the value of the field it always gets this preset value again,rather than the new value entered. Does anyone see a problem? Thanks.

DEMO

publish_dialog$ = $('<div></div>').appendTo('body')
    .html("<div><h6>Publish as . . .</h6><input id='publish_name' type='text'></div>");
$('input#publish_name').val(g.last_publish_name);
publish_dialog$.dialog({
    modal: true, title: 'Publish as . . .', zIndex: 10000, autoOpen: true,
    width: 'auto', resizable: false,
    buttons: {
        Publish: function () {
            g.last_publish_name = $("#publish_name").val();  // get value entered
            publishPage(g.last_publish_name);
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
});

Answer 1

jQuery dialogs are insane. They basically copy your html to another container and append that to the body. So if you use ids for your input elements, you can get very unpredictable behavior. I've had to dance a lot with it in the .net world. But if you don't need ids on your elements (which you almost always don't), try changing the way you access your inputs to classes. Then look at your DOM and see under what container it put your cloned fields and access them there. Check this answer for more insight: jQuery UI Dialog behaves unpredictably

Answer 2

I know it's old, but i trap in same issue and found another workaround. Just attach onkeypress event to input field like this:

<input type="text" id="cancel_descr" value="" onkeypress="document.getElementById('cancel_descr').value=this.value"/>

Looks strange, but that work for me - jQuery create copy of div container, and this event push all entered data back to original.