One dilemma I am facing involves a jQuery dialog box with an HTML input inside. This dialog box includes two buttons - Save and Cancel. When the user clicks Save, I check if they have entered input in the text field. If not, I display an error message within the dialog box and prompt them to provide input. However, after hitting Save again, nothing occurs. How can I re-bind the Save button once it has already been used? Thank you!
var message = "Please enter a phone number."
var phoneNumber = "<input type='text' id='phoneNumber' name='phoneNumber'/> ";
var dialogHtml = "<div id='confirmPhoneNumber'>" + message + phoneNumber + "<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 () {
// Check if phone number is provided
if ($("#phoneNumber").val().trim().length == 0) {
$("#dialogError").show();
} else {
// Make AJAX call
}
},
'Cancel' : function () {
$(this).dialog('close');
}
}
});