Question

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

    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

您正在使用IE进行测试吗？您是否在页面上收到任何错误？

如果您看一下（我正在使用chrome测试） here它可以工作，它会让您按下按钮，它会显示错误，输入内容，点击再次，它提醒。所以按钮仍在工作。

但是，IE不起作用 - 它显示错误..... .trim()不是IE支持的功能 。因此，您可以使用jQuery's .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');
        }
    }
});

再试一次here它适用于IE。

查看Trim in javascript not working in IE。

Answer 2

实际上代码正在运行。这里唯一的事情是你因为错过配置的测试场景而无法实现它（至少我是这么认为的，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');
        }
    }
});

如果你测试一下，你会发现没有任何解除绑定。

EDİT：重新配置if check in in save按钮。希望这会奏效。

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/

上的演示

你必须有其他事情发生。

jQuery对话框按钮重新绑定

5 个答案: