1

我有一个文本字段，其更改事件绑定到一个验证文本字段值的函数，并可能将相应的验证错误消息拼接到文本字段上方的 DOM 中。如果通过单击一对有些不相关的单选按钮中的一个触发更改事件，则单击的单选按钮将获得焦点，但与我和用户的期望相反，它不会被选中 - 这就是问题所在。

虽然最终系统中的验证将使用 AJAX 在服务器端进行，但以下代码表明 AJAX 与该问题无关。

你能告诉我我在这里缺少什么吗：

<html>
<head>                                                                  
<STYLE type="text/css">
    .highlighted { color: red; }
</STYLE>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>          
</head>                                                                 
<body>                                                                  

<span id="errors">
</span>

<label for="mytextfield">First, type something in this textfield</>
<input type="text" id="mytextfield" name="mytextfield"/>

<p>Second, click on one of these radio buttons</>

<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</>

<script type="text/javascript">
    $(document).ready(function() {
        //$("#mytextfield").change(validateTextField);
        $("#mytextfield").change(spliceInTheValidationResultMessage);
    });

    function validateTextField() {
            $.ajax({
                url: 'http://www.google.com',
                success: function(data) {
                    spliceInTheValidationResultMessage();
                }
            });
    }

    function spliceInTheValidationResultMessage() {
        $("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted");
        alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!");
    };

</script>
</body> 
</html>
4

1 回答 1

0

抱歉，我在执行您尝试做的事情时遇到了一些麻烦，但是您是否正在尝试做这样的事情？

<input id="radio1" type="radio" name="binaryquestion" value="Y">Yes</>
<input id="radio2" type="radio" name="binaryquestion" value="N">No</>
<script type="text/javascript">$(document).ready(function () {
    //$("#mytextfield").change(validateTextField);
    //$("#mytextfield").change(spliceInTheValidationResultMessage);
    $("#radio1").bind("click", spliceInTheValidationResultMessage, false);
    $("#radio2").bind("click", spliceInTheValidationResultMessage, false);
});

我只是简单地将 id 属性添加到您的单选按钮输入并在它们上使用 jQuery bind() 方法。您可能想要更改 validateTextField() 函数，以便它获取文本字段中的文本。

于 2010-12-31T22:30:56.653 回答