Question

I have a simple jQuery dialog box that has an html input inside it. There are two buttons Save/Cancel on the dialog box. When the user hits Save, I validate if he has provided any input in the input box. If he hasn’t, I report the error on a new line in the dialog box and wait for him to provide input. But when he hits Save again, nothing happens. How can I re-bind the Save button once it has been used? Thanks!

    var message = "Please provide Phone number."
    var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
    var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'>Phone number field cannot be empty</div>" + "</div>";
    $(this).append(dialogHtml);
    $("#confirmPhoneNumber").css("font-size", "70%");
    $("#confirmPhoneNumber").dialog({
        resizable : false,
        modal : true,
        title : 'Save Phone',
        buttons : {
            'Save' : function () {
                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                } else {
                // Make AJAX call
                }
            },
            'Cancel' : function () {
                $(this).dialog('close');
            }
        }
    });

Answer 1

actually the code is working. only thing here is you can’t realize it because of miss-configured test scenario ( at least I think so, LoL )

var message = "Please provide Phone number."
var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'></div>" + "</div>";
$('body').append(dialogHtml);
$("#confirmPhoneNumber").css("font-size", "70%");
$("#confirmPhoneNumber").dialog({
    resizable : false,
    modal : true,
    title : 'Save Phone',
    buttons : {
        'Save' : function () {
            // Phone number must be provided
            if ($.trim($("#phoneNum").val()).length == 0){
                $("#dialogError").html("error occured, fill the textfield please");
                $("#dialogError").show();
            } else {
                $("#dialogError").html("now it is working " + $("#phoneNum").val());
                $("#dialogError").show();
            // Make AJAX call
            }
        },
        'Cancel' : function () {
            $(this).dialog('close');
        }
    }
});

if you test this, you will see that there is no unbinding at all.

EDİT : re-configured the if check in save button. hope this will work.