jQuery 对话框按钮重新绑定

Question

我有一个简单的 jQuery 对话框，里面有一个 html 输入。对话框中有两个按钮“保存”/“取消”。当用户点击“保存”时，我验证他是否在输入框中提供了任何输入。如果他没有，我会在对话框中的新行中报告错误并等待他提供输入。但当他再次点击“保存”时，什么也没有发生。使用后如何重新绑定“保存”按钮？谢谢！

    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

实际上代码正在运行。这里唯一的事情是你无法意识到它，因为错误配置的测试场景（至少我这么认为，哈哈）

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');
        }
    }
});

如果你测试这个，你会发现根本没有解除绑定。

编辑：重新配置“如果签入保存”按钮。希望这会起作用。

Answer 2

你用IE测试吗？您在页面上看到任何错误吗？

如果你看一下（我正在使用 chrome 进行测试） 这里< /strong> 它有效，它允许您按下按钮，它会显示错误，输入一些内容，再次单击它会发出警报。所以按钮仍然有效。

但是，IE 不起作用 - 它显示错误.......trim() 不是 IE 支持的函数 。因此，您可以使用 jQuery 的 .trim() 代替：

$("#confirmPhoneNumber").dialog({
    autoOpen: true,
    resizable: false,
    modal: true,
    title: 'Save Phone',
    buttons: {
        'Save': function() {
            // Phone number must be provided
            if ( $.trim($("#phoneNum").val()).length == 0) {
                 $("#dialogError").show();
            } else {
                alert('Got a number');
            }
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});

尝试再次此处它适用于 IE。

看看在 IE 中无法使用 javascript 进行修剪< /strong>。

Answer 3

您可以像这样处理验证过程

           'Save' : function () {
                var valid = true;

                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                    valid = false;
                }
                //any other validations


                if (valid === true) {
                // Make AJAX call
                }
            },

，因此可以多次调用验证，并且如果所有有效 - 表单都会被处理

Answer 4

您可以使用“live”方法绑定到控件。但这通常用于动态创建新控件的情况。

Answer 5

按下对话框按钮后，jQuery UI 不会取消绑定单击处理程序。

请参阅 http://jsfiddle.net/MwNJd/2/ 上的演示

您一定还有其他事情要做在。