Радио Bootstrap 3 требует двойного нажатия - PullRequest
Новая
       23

Радио Bootstrap 3 требует двойного нажатия

0 голосов
/ 18 января 2019

На моей веб-странице у меня есть вопрос, требующий одного ответа из 3 возможных вариантов. Но, реализуя 3 радио (кнопки) с помощью Bootstrap 3, я либо не генерирую ни одного события, либо генерирую 2 события. Если я нажимаю на названную метку любой из переключателей (например, «ON» или «OFF»), кнопка изменяется, но событие не генерируется. Но если я нажму на пустую половину переключателя, при изменении кнопки будут сгенерированы 2 события.

Этот пост должен ответить на половину моей проблемы, о событии, инициируемом дважды: Bootstrap 3 радио-кнопки с двойным переключением Но, как бы я ни пытался, просматривая мои файлы Bootstrap JavaScript, я не вижу, что я использую любую другую версию Bootstrap, кроме версии 3.

Я также читал ответы, где слушатель событий удваивается (объясняя, почему они запускаются дважды), но это не так в моем JavaScript, насколько я вижу.

Я извлек свой код и поместил его в это jsfiddle . Обратите внимание, что эта скрипка генерирует только 1 событие за клик. Мне не удалось найти онлайн-URL для всех моих файлов .js. Буду признателен, если кто-нибудь поможет мне найти последний отсутствующий: (У меня есть локальные копии на моем компьютере) 

https://fiddle.jshell.net/_display/js/bootstrap-switch/main.js

Я знаю, что не совсем полезно, что это не полностью повторяет проблему, но если кто-то может помочь мне найти URL-адреса для вышеупомянутых файлов javascript, это, я надеюсь, поможет мне.

Я надеюсь получить 1 событие, сгенерированное надежно, независимо от того, на какую половину радио (кнопки) я нажимаю. Если я покончу с начальной загрузкой, события генерируются каждый раз, когда я нажимаю, но для каждого щелчка по-прежнему генерируются 2 события.

1 Ответ

0 голосов
/ 07 февраля 2019

Вы просто вызываете переключатель начальной загрузки два раза; один в вашем файле main.js как; 

$("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();

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

Для решения:

Я просто закомментировал строку переключателя начальной загрузки в файле main.js , чтобы не потерять контроль над радиостанциями и для простейшего использования обновить index.html и index.js файлы, как показано ниже;

Index.html 

<table class="overall-table" align="center">
   <thead></thead>
   <tbody>
     <tr>
        <td><th>Choice: None / Add / Dis:&nbsp;</th></td>
        <td></td>
        <td>
           <input id="cbox1" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="true" value="none">
           <input id="cbox2" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="add">
           <input id="cbox3" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="dis">
        </td>
      </tr>
   </tbody>
</table>

index.js 

$( document ).ready(function()
{
    $(".bootstrap-switch").bootstrapSwitch({
        'size': 'midi',
        'onSwitchChange': function(event, state){
            console.log("event", event);
            console.log("state", state);
            console.log("this", this); //this mean the checked radio in here
            console.log("checked radio value", $(this).val());
            // Do your logic in here according to the value 
            // if..else..
        }
    });
});

Кстати, вам не нужен элемент формы для определения проверенного события, переключатель сделал это для вас:)

Надеюсь, это поможет.

...