Добавить кнопку переключения с начальной загрузкой динамически с JS и JQuery не работает - PullRequest
Новая
       41

Добавить кнопку переключения с начальной загрузкой динамически с JS и JQuery не работает

0 голосов
/ 04 сентября 2018

Я очень новичок в JS и HTML, и я пытаюсь использовать в своем коде кнопки начальной загрузки (переключения). Проблема в том, что они не выглядят так, как я ожидаю.

enter image description here

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

Поскольку кнопка Bootstrap загружается правильно, я полагаю, что в начале HTML-кода ссылка в порядке

В первый раз появляются три кнопки: 

<div class="checkbox"">
          <br>
          <br>
           <input checked data-toggle="toggle" type="checkbox">
      </div>

Второй раз, когда появляется переключатель, благодаря следующему коду 

<script >
$(document).ready(function(){
    $.getJSON("mylocaljsonfile.json", function(data){
        var concept_list= '';
        $.each(data, function(key, value){
            console.log("here comes another")
            console.log(value)
            console.log("this is the key:")
            console.log(key)
            concept_list += '<tr>';
            concept_list += '<td align="center" style="vertical-align:center>';
            concept_list += '<div class="checkbox" ><input checked data-toggle="toggle" type="checkbox" data-id="' + value.name + '"></div>';
            concept_list += '</td>';
            concept_list += '<td>'+value.name+'</td>';
            concept_list += '<td>'+value.color+'</td>';
            concept_list += '<td>'+value.fingerprint+'</td>';
            concept_list += '<td>'+value.hits+'</td>';
            concept_list += '<td>'+value.EN+'</td>';
            concept_list += '<td>'+value.DE+'</td>';
            concept_list += '<td>'+value.FR+'</td>';
            concept_list += '</tr>';
        });
        $('#concept_list').append(concept_list);
    });
});

Код читает локальный JSON-файл, добавляет строки для каждой записи, а в первом столбце каждой строки - переключатель, который, как я утверждаю, похож на первые красивые серые. Где проблема во вторых переключателях? Я попробовал все, удалить идентификатор, перемещаясь по тексту, etcetc

И я не могу найти решение.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Похоже, что добавление этого решает проблему: 

$("[data-toggle]").bootstrapToggle()

После циклического перемещения по таблице JS должен снова как-то запустить эту функцию над флажками, и тогда он заработает.

0 голосов
/ 04 сентября 2018

Проверьте, не создан ли симпатичный флажок где-то с помощью функции javascript (вероятно, если вы используете шаблон в своем приложении.)

Вполне вероятно, что ваш js вставляет эти флажки ПОСЛЕ того кода, который применяет стилизацию (преобразует ваш стандартный флажок в симпатичный).

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

Затем вам нужно будет запустить тот же код после того, как ваш js закончит вставку флажков для каждого флажка. .

...