1

我有一个简单的 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');
            }
        }
    });
4

5 回答 5

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

如果您对此进行测试，您会发现根本没有解除绑定。

编辑：重新配置了如果签入保存按钮。希望这会奏效。

于 2011-03-18T09:34:35.670 回答
1

你是用IE测试的吗？您是否在页面上收到任何错误？

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

但是， IE 不起作用 - 它显示错误..... .trim()is not a supported function by 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。

看看Trim in javascript not working in IE。

于 2011-03-18T09:00:28.770 回答
0

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

于 2011-03-18T08:46:40.200 回答
0

jQuery UI doesn't unbind the click handler on a dialog button once it's pressed.

See a demo at http://jsfiddle.net/MwNJd/2/

You must have something else going on.

于 2011-03-18T08:50:43.913 回答
0

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

           '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
                }
            },

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

于 2011-03-18T08:44:33.823 回答