MediaList conversion

Hi, I have a media-list that changes to checkboxes on taphold. I put this code to convert <a> items into <label> items. The code works fine but the checkboxes doesn’t get checked when I click on them. Maybe I need some kind of refresh? Thanks!

if (device.platform == 'browser') {
    // Taphold doesn't work on browser
    $viewDiv.on('contextmenu', 'a', taphold);
} else {
    $viewDiv.on('taphold', 'a', taphold);
};

function taphold(e) {
    var $list = $(this).closest('div.list');
    if ($list.hasClass('media-list')) {
        $get('.media-list a').replaceWith(function () {
            var $label = $('<label/>', {
                class: 'item-checkbox item-content',
            });

            $('<input/', {
                type: 'checkbox',
                value: 1,
            }).appendTo($label);

            $('<i/>', {
                class: 'icon icon-checkbox',
            }).appendTo($label);

            $label.append($(this).contents());

            return $label;
        });
    };
};

Example list:

<div class="list media-list chevron-center" style="margin-top: 0;">
    <ul>
        <li doc_id="381910">
            <a href="#" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title-row">
                        <div class="item-title">My title</div>
                    </div>
                    <div class="item-subtitle">My subtitle</div>
                </div>
            </a>
        </li>
    </ul>
</div>

The code seems correct to me. Did you inspect “converted” item HTML, is it correct?

Hi Vladimir. Yes, this is the code. When I click a checkbox I can see that active-state class appears on it, but disappear after a second:

<div class="list media-list chevron-center" style="margin-top: 0;">
<ul>
    <li doc_id="332889">
        <label class="item-checkbox item-content">
            <i class="icon icon-checkbox"></i>
            <div class="item-inner">
                <div class="item-title-row">
                    <div class="item-title">DIACREACION: 2019-03-27</div>
                </div>
                <div class="item-subtitle">NOMBRE: Lily</div>
            </div>
        </label>
    </li>
</ul>

This code is not correct. There must be an <input> before the icon. Check the layout in docs https://framework7.io/docs/checkbox.html#checkbox-group-list

Thank you Vladimir, I found the error. The closing > for input was missing :man_facepalming:

 $('<input/', {
            type: 'checkbox',
            value: 1,
        }).appendTo($label);
1 Like