Событие радиокнопки Onclick требует два клика для запуска / выполнения в Firefox - PullRequest
Новая
       21

Событие радиокнопки Onclick требует два клика для запуска / выполнения в Firefox

0 голосов
/ 23 марта 2011

Надеюсь, у кого-то есть решение этой странности в Firefox 3.

У меня в основном есть 3 переключателя и 3 поля ввода текста (см. Следующий код): 

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1"  id="text1" />

<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2"  id="text2" />

<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3"  id="text3" />

Теперь каждыйКогда я нажимаю на определенную кнопку-переключатель, элементы ввода текста для двух других кнопок должны быть очищены и также отключены (см. следующий код). 

function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
 $(":radio").click(function(event) {

// use event.target to determine which radio button was clicked
   if (event.target.id=="preloaded") {
    document.getElementByID("text1").disabled=false;
    $("#text2").val("");
    $("#text3").val("");
    document.getElementById("text2").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="custom") {
    document.getElementByID("text2").disabled=false;
    $("#text1").val("");
    $("#text3").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="vector") {
    document.getElementByID("text3").disabled=false;
    $("#text1").val("");
    $("#text2").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text2").disabled=true;
   }
 });
});
}

Кроме того, когда страница первоначально загружена,Поля ввода text2 и text3 отключены с помощью javascript, так как поле text1 установлено по умолчанию: 

document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;

Проблема, с которой я столкнулся, заключается в том, что для работы с Firefox требуется 2 (два) щелчка.В Internet Explorer он работает как положено.

Итак, при первом нажатии радиокнопки - ничего не происходит.При повторном щелчке по нему происходит событие Onclick.

ПРИМЕЧАНИЕ: я использую JQuery для этого, но также использовал прямой Javascript безрезультатно.

Вы можете просто скопировать и вставить мой код в редактор и открыть страницу с помощью Firefox длясм. вопрос из первых рук.

Кто-нибудь еще сталкивался с этим?Это какая-то ошибка в Firefox?Если да, есть ли обходной путь?

Любая помощь, комментарии, предложения и пожелания приветствуются.

Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 23 марта 2011

Поскольку вы используете jQuery для назначения обработчика событий для щелчка переключателя, вы можете удалить атрибут onClick.

Это должно работать для вас: 

$(function() {
    $(":radio").click(function(event) {
        if (this.id == "preloaded") {
            $("#text1").removeAttr("disabled");
            $("#text2, #text3").val("").attr("disabled", true);
        } else if (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } else if (this.id == "vector") {
            $("#text3").removeAttr("disabled");
            $("#text1, #text2").val("").attr("disabled", true);
        }
    });
    $("#text2, #text3").val("").attr("disabled", true);
});

Пример кода на jsfiddle .

Примечание: поскольку вы используете jQuery, вы также можете использовать jQuery почти для всех взаимодействий с dom, так как их смешивание в конечном итоге приведет к некоторой боли. Позвольте jQuery скрыть несоответствия в браузерах.

0 голосов
/ 23 марта 2011

Вы можете попробовать обработчик событий .change(). Я думаю, что это могло бы работать лучше.

РЕДАКТИРОВАТЬ: Есть проблемы с событием .change() и IE.

0 голосов
/ 23 марта 2011

Вы начали использовать jQuery, а затем вернулись к обычному JavaScript ... но вы неправильно набрали функцию getElementById ().

Я бы придерживался jQuery, если он у вас есть, он позволит избежать ошибок IE сэтот конкретный метод тоже.

Очиститель HTML 

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>

<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>

<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>

и jQuery ... 

$(document).ready(function(){
  //bind the click event to the radio buttons
  $(':radio').click(function(){
    var radioID = $(this).attr('id');
    if(radioID == 'preloaded'){
      $('#text1').removeAttr('disabled');
      $('#text2, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'custom'){
      $('#text2').removeAttr('disabled');
      $('#text1, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'vector'){
      $('#text3').removeAttr('disabled');
      $('#text1, #text2').val('').attr('disabled','disabled');
    }
  });
});
...