jQuery Mobile — фильтрация списка флажков приводит к появлению флажков без стиля

Давний читатель и первый постер здесь, несколько новичок в jQuery/jQM.

У меня есть форма, содержащая Listview с фильтром данных, где каждый элемент списка содержит флажок. Когда я ввожу текст в поле фильтра и элементы фильтруются, в фоновом режиме появляются дополнительные флажки без стиля. Вот пример кода:

<div data-role="content">  
    <ul data-role="listview">
        <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="228"/>   
                <label for="228">
                    Orange
                </label>
            </li>   
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="70"/>   
                <label for="70">
                    Red
                </label>
            </li>    
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="71"/>   
                <label for="71">
                    Blue
                </label>
            </li>                

            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="72"/>   
                <label for="72">
                    Purple
                </label>
            </li>                  
        </fieldset>
    </ul>
</div>

Первоначально я думал, что проблема связана с тем, как я динамически генерировал список (т.е. я думал, что должен получать дубликаты флажков, потому что нестилизованные флажки соответствовали элементам в моем списке), но я смог воспроизвести проблему, используя простой пример кода выше в jsfiddle: http://jsfiddle.net/KsRb2/2/

Любая помощь приветствуется. Спасибо!


javascript checkbox jquery jquery-mobile jquery-mobile-listview
person allisonelizabeth    schedule 06.12.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Это поведение является ошибкой в ​​jQM 1.4.0 alpha 2. Вам следует обновиться до 1.4.0 RC1, а также удалить теги ul и li, потому что этот список должен быть только списком или контрольной группой, он не может быть и тем, и другим. Это будет окончательный HTML:

<div data-role="content">  
    <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
        <input type="checkbox" 
            name="itemIds" 
            id="228"/>   
        <label for="228">
            Orange
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="70"/>   
        <label for="70">
            Red
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="71"/>   
        <label for="71">
            Blue
        </label>

        <input type="checkbox" 
            name="itemIds" 
            id="72"/>   
        <label for="72">
            Purple
        </label>
    </fieldset>
</div>

Вы можете попробовать это здесь: http://jsfiddle.net/KsRb2/5/

person markegli    schedule 06.12.2013

arrow_upward
0
arrow_downward

jQM создает собственный стилизованный флажок, но сохраняет исходный элемент INPUT в DOM. Это выявляется при фильтрации. Следующий CSS скрывает эти элементы:

li .ui-checkbox input{
    visibility: hidden;
}

Вот ваша обновленная скрипта: http://jsfiddle.net/ezanker/KsRb2/4/< /а>

person ezanker    schedule 06.12.2013

arrow_upward
0
arrow_downward

На самом деле вам просто нужно добавить data-filter-reveal="true" в набор полей. Нет необходимости использовать CSS.

person elifares    schedule 27.06.2014