Fatal编程技术网
  • dom/
  • Dom 在类似AJAX的场景中单击后未选中单选按钮

Dom 在类似AJAX的场景中单击后未选中单选按钮

dom

Dom 在类似AJAX的场景中单击后未选中单选按钮,dom,radio-button,jquery-events,checked,mutation-events,Dom,Radio Button,Jquery Events,Checked,Mutation Events,我有一个textfield，它的更改事件绑定到一个函数，该函数验证textfield的值，并可能将相应的验证错误消息拼接到textfield上方的DOM中。如果更改事件是通过单击一对不相关的单选按钮中的一个触发的，则单击的单选按钮将获得焦点，但与我和用户的期望相反，不会被选中-这就是问题所在 虽然最终系统中的验证将使用AJAX在服务器端执行，但下面的代码表明AJAX与问题无关 你能告诉我我在这里遗漏了什么吗： <html> <head>

我有一个textfield，它的更改事件绑定到一个函数，该函数验证textfield的值，并可能将相应的验证错误消息拼接到textfield上方的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>


.突出显示{颜色：红色；}
首先，在此文本字段中键入一些内容
其次，单击其中一个单选按钮
对
不
$（文档）.ready（函数（）{
//$（“#mytextfield”）.change（validateTextField）；
$（“#mytextfield”）.change（拼接在ValidationResultMessage中）；
});
函数validateTextField（）{
$.ajax({
网址：'http://www.google.com',
成功：功能（数据）{
拼接验证结果消息（）；
}
});
}
函数名为ValidationResultMessage（）{
$（“#错误”）.append（感谢您的输入！
）.addClass（“突出显示”）；
警报（“我希望您单击的单选按钮被选中。但是，关闭此对话框，您将看到它将获得焦点，但未被选中！”）；
};
很抱歉，我在理解您的意图时遇到了一些问题，但您是否正在尝试这样做

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

是
不
$（文档）.ready（函数（）{
//$（“#mytextfield”）.change（validateTextField）；
//$（“#mytextfield”）.change（拼接在ValidationResultMessage中）；
$（“#radio1”）.bind（“单击”，拼接在ValidationResultMessage中，false）；
$（“#radio2”）.bind（“单击”，拼接在ValidationResultMessage中，false）；
});
我只是简单地将id属性添加到单选按钮输入中，并对其使用jQuery bind（）方法。您可能需要更改validateTextField（）函数，以便它捕获文本字段中的文本。

尝试更改单选按钮状态的代码在哪里？我看不到。没有这样的代码。如果将页面加载到浏览器中并单击其中一个单选按钮，问题在于单选按钮是否被选中取决于您没有首先在文本字段中键入内容。问题定义的进一步细化：问题在于单选按钮是否被选中取决于您没有事先在文本字段中键入内容。每次textfield的值被视为已更改（即，用户单击（或制表符到）从textfield到另一个字段，刚刚更改了textfield的值），我的Javascript需要导致在“错误”范围内报告任何textfield值验证错误。这可以通过将textfield的“onchange”函数绑定到validateTextField来实现。从文本字段切换到单选按钮并按空格键切换单选状态效果良好，而“直接”单击单选按钮无法使单击的按钮保持选中状态。我刚刚意识到，我还没有断言此问题肯定与textfield的onchange事件处理程序中DOM的突变直接相关。虽然在我的页面中单击单选按钮总是会使该单选按钮具有焦点（按钮周围的虚线方框）这一事实表明浏览器已经识别了该单击，但这就好像浏览器对单击内容的确定部分受到DOM突变的影响（以及相关的拼接信息下方所有内容的重新定位）。