1

html入力を含む単純なjQueryダイアログボックスがあります。ダイアログボックスには、[保存/キャンセル]ボタンが2つあります。ユーザーが[保存]をクリックすると、ユーザーが入力ボックスに入力を入力したかどうかを検証します。彼がそうでない場合は、ダイアログボックスの新しい行でエラーを報告し、彼が入力を提供するのを待ちます。しかし、彼がもう一度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');
            }
        }
    });
4

5 に答える 5

1

IEでテストしていますか？ページにエラーがありますか？

ここで見てみると（私はクロームでテストしています） 、それは機能し、ボタンを押すことができ、エラーが表示され、何かを入力し、もう一度クリックするとアラートが表示されます。したがって、ボタンはまだ機能しています。

ただし、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のトリムを見てください。

于 2011-03-18T09:00:28.770 に答える
1

実際にコードは機能しています。ここでの唯一のことは、テストシナリオの設定が間違っているためにそれを実現できないことです（少なくとも私はそう思います、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チェックイン保存ボタンを再構成しました。これがうまくいくことを願っています。

于 2011-03-18T09:34:35.670 に答える
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 に答える
0

'live'メソッドを使用してコントロールにバインドできます。ただし、これは通常、新しいコントロールが動的に作成される場合に使用されます。

于 2011-03-18T08:46:40.200 に答える
0

jQuery UIは、ダイアログボタンが押されると、クリックハンドラーのバインドを解除しません。

http://jsfiddle.net/MwNJd/2/でデモを参照してください

あなたは何か他のことが起こっているに違いありません。

于 2011-03-18T08:50:43.913 に答える