Блог

Главная - Вопросы по программированию - Почему мое событие jquery .change запускается только один раз на переключателях?

Почему мое событие jquery .change запускается только один раз на переключателях?

#jquery #twitter-bootstrap

#jquery ( jquery ) #twitter-bootstrap

Вопрос:

Скрипка JS:

http://jsfiddle.net/3F6TY/

Вам понадобится Bootstrap.js для этого.

В некоторых других потоках SA говорилось, что это может быть проблемой делегирования, но я не вижу причин для делегирования в имеющемся у меня коде, поскольку селектор никогда не изменяется и не исчезает в HTML.

Когда я нажимаю на First Radio аккордеон, он опускается, но когда я нажимаю на него, аккордеон не скрывается так, как я хочу. У меня есть свой код, написанный так, что при включении change переключателя он проверяет, установлен ли переключатель, и если нет, он сворачивает аккордеон.

           <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="firstRadio" value="">
              First Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="firstAccordion">
            <div>
              First Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="secondRadio">
              Second Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="secondAccordion">
            <div>
              Second Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="thirdRadio">
              Third Radio with no Accordion
            </label>
          </div>


$('input[id="firstRadio"]').change(function () {

    if ($(this).is(":checked")) {

        $('#firstAccordion').collapse('show');

    } else {

        $('#firstAccordion').collapse('hide');
    }

});

Ответ №1:

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

Другими словами, событие не запускается только один раз, но это выглядит так, потому что оно запускается только при нажатии на первый переключатель.

Вместо этого прикрепите событие ко всем переключателям:

 $('input[name="radios"]').change( function() {
    if ($('#firstRadio').is(":checked")){
        $('#firstAccordion').collapse('show');
    } else {
        $('#firstAccordion').collapse('hide');
    }
});

ДЕМОНСТРАЦИЯ

Комментарии:

1. Хммм? Я не понимаю. Когда пользователь нажимает другую переключатель, первый переключатель автоматически снимается, что означает, что он получает changed , верно?

2. Да, но это не вызывает событие изменения.

3. О боже. Я не могу найти нигде в документации, в которой это говорится. Откуда вы должны знать, что снятие флажка с переключателя на самом деле не вызывает событие изменения? Кроме того, есть ли какой-либо другой прослушиватель событий, который будет работать, когда переключатель не будет отмечен, если что-то еще будет проверено? IMO, что только что произошло, показывает явный недостаток в прослушивателе .change.

4. Причина, по которой это работает таким образом, заключается в том, что обычный вариант использования проверяет, изменилась ли группа радио вообще, и вы не хотите, чтобы это событие произошло дважды. Пример: jsfiddle.net/8ED49 Если он сработает один раз для кнопки, которая будет снята, и еще раз для кнопки, которая будет отмечена, событие будет запускаться дважды при каждом нажатии.

Ответ №2:

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

 $('input[type="radio"]').change( function() {
        if ($(this).attr("id") == "firstRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').show("fast");
                $('#secondAccordion').hide("fast");
                $('#thirdAccordion').hide("fast");
            }
        } else if ($(this).attr("id") == "secondRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').hide("fast");
                $('#secondAccordion').show("fast");
                $('#thirdAccordion').hide("fast");
            }
        } else if ($(this).attr("id") == "thirdRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').hide("fast");
                $('#secondAccordion').hide("fast");
                $('#thirdAccordion').show("fast");
            }
        }
  });
Метки: