oTree и JavaScript проверяют, активен ли класс (проверено) - PullRequest
Новая
       14

oTree и JavaScript проверяют, активен ли класс (проверено)

0 голосов
/ 02 декабря 2018

, когда я запускаю этот код: 

    <div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        <script>
           $('label').click( function() {
          $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
         if ($('#id_players_choice_0').is(':checked')) {
         x = id_players_choice_0.value};
         if ($('#id_players_choice_1').is(':checked')) {
         x = id_players_choice_1.value};
          alert(x);
         });
        </script>
        {{checkbox}}
    </label>
{% endfor %}
</div>

Я получаю значение (переменную x) только во второй или третий раз, когда я нажимаю кнопку.
Есть ли способисправить это?
Спасибо!

1 Ответ

0 голосов
/ 02 декабря 2018

Селектор $('label') выберет метки, которые уже являются частью документа.Кроме того, не следует помещать этот обработчик кликов в цикл, поскольку он будет умножать один и тот же обработчик на несколько элементов.Переместите этот скрипт в конец документа, непосредственно перед закрывающим тегом </body>.

Кроме того, убедитесь, что вы объявили переменную x, чтобы она имела правильную область действия. 

<div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        {{checkbox}}
    </label>
{% endfor %}
</div>
<script>
    $('label').click( function() {
        var x;
        $(this).addClass('btn-primary').removeClass('btn-default')
               .siblings().removeClass('btn-primary').addClass('btn-default');
        if ($('#id_players_choice_0').is(':checked')) {
            x = id_players_choice_0.value;
        }
        if ($('#id_players_choice_1').is(':checked')) {
            x = id_players_choice_1.value;
        }
        alert(x);
    });
</script>

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

    $(document).on('click', 'label', function() { // ...etc
...