Переключатель отключен после нажатия в AJAX-подобном сценарии

Question

Переключатель отключен после нажатия в AJAX-подобном сценарии

У меня есть текстовое поле, для которого события изменения связаны с функцией, которая проверяет значение текстового поля и может разделить соответствующее сообщение об ошибке проверки в 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>

1

dom radio-button checked mutation-events javascript-events

Источник

user559496 31 дек '10 в 22:07

1 ответ

Другие вопросы по тегам dom radio-button checked mutation-events javascript-events

user70530 31 дек '10 в 22:30 2010-12-31 22:30 · Answer 1 · 2010-12-31 22:30

Извините, у меня возникли некоторые проблемы с тем, что вы пытаетесь сделать, но вы пытаетесь сделать что-то подобное?

<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(), чтобы она захватывала текст в текстовом поле.