【jQuery】リストの絞り込みでの、”すべて表示” ボタン設置

Question

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
「3. 配列を使ってリスト側に複数の値を設定できるようにする」

上記のサイトを参考に、表示切り替え（複数条件）の実装をしたいのですが、すべて表示ボタンの追加設置でつまづいています。。。
上記の例では、Category内にallボタンが実装されていますが、__「1. 選択した項目で絞り込み検索をする」__のようなallボタンを設置したいです。

1. はじめはALLボタンを選択している状態
2. ボタンAをクリックしたら、Aのコンテンツを表示。ALLボタンの選択が外れる。
3. ボタンBをクリックすると、追加でBのコンテンツも表示。
4. ALLボタンを選択したら、ボタンAとボタンBの選択が外れてすべてのコンテンツを表示

基本は、上記サイトのコードをクラス名だけ書き換える形で使用していますが、

/**
 * リストの絞り込みを行う
 */
function search_filter() {......

の上に、以下コードを記述し、現在どのボタンが押されているのかわかるようなスタイルを設定しています。
※通常のチェックボックススタイルを消して、ボタンデザインにしているため

    $('label').on('click', function(){
        $(this).toggleClass('is-active');
    });

そのため、表示を切り替えるだけではなく、スタイルの切り替えも行いたいです。
色々試してみたのですが、全くもって実装できず…
素人でお恥ずかしい限りですが、お力をお貸しいただけると幸いです。
よろしくお願いいたします。

###追記（試したこと）
はじめての質問で、勝手がわかっておらず大変失礼いたしました。
上記リンクを参考に、自分で書いたコードを追記します。

　　　　　　　<div class="contents-wrapper">
                <div class="contents-search">
                    <div class="contents-search__wrapper">
                        <button id="all">ALL</button>
                        <div class="search__box">
                            <input type="checkbox" name="category" value="AAA" id="AAA">
                            <label for="AAA">AAA</label>
                            <input type="checkbox" name="category" value="BBB" id="BBB">
                            <label for="BBB">BBB</label>
                            <input type="checkbox" name="category" value="CCC" id="CCC">
                            <label for="CCC">CCC</label>
                            <input type="checkbox" name="category" value="DDD" id="DDD">
                            <label for="DDD">DDD</label>
                        </div>
                        <div class="search__box">
                            <input type="checkbox" name="level" value="high" id="high">
                            <label class="label" for="high">high</label>
                            <input type="checkbox" name="level" value="low" id="low">
                            <label class="label" for="low">low</label>
                        </div>
                    </div>
                </div>
　　　　　　　　　 <ul class="contents__list">
                    <li class="list__item" data-category='["AAA"]' data-level='["high"]'></li>
                    <li class="list__item" data-category='["AAA"]' data-level='["low"]'></li>
                    <li class="list__item" data-category='["BBB"]' data-level='["high"]'></li>
                    <li class="list__item" data-category='["BBB"]' data-level='["low"]'></li>
                    <li class="list__item" data-category='["CCC"]' data-level='["high"]'></li>
                    <li class="list__item" data-category='["DDD"]' data-level='["low"]'></li>
               </ul>
　　　　　　</div>

    var defaultHTML = $('.contents-wrapper').html();

    // HTML記述を初期状態に戻す
    $('#all').on('click', function(){
        $('.contents-wrapper').html(defaultHTML);
    });

    //リストの絞り込み
    var searchBox = '.search__box';
    var listItem = '.list__item';
    var hideClass = 'is-hide';

    $(document).on('change', searchBox + ' input', function() {
        search_filter();
    });

    $('label').on('click', function(){
        $(this).toggleClass('is-active');
    });

    function search_filter() {
        $(listItem).removeClass(hideClass);
        for (var i = 0; i < $(searchBox).length; i++) {
            var name = $(searchBox).eq(i).find('input').attr('name');
            var searchData = get_selected_input_items(name);
            if(searchData.length === 0) {
                continue;
            }
            for (var j = 0; j < $(listItem).length; j++) {
                var itemData = get_setting_values_in_item($(listItem).eq(j), name);
                var check = array_match_check(itemData, searchData);
                if(!check) {
                    $(listItem).eq(j).addClass(hideClass);
                }
            }
        }
    }

    function get_selected_input_items(name) {
        var searchData = [];
        $('[name=' + name + ']:checked').each(function() {
            searchData.push($(this).val());
        });
        return searchData;
    }

    function get_setting_values_in_item(target, data) {
        var itemData = target.data(data);
        if(!Array.isArray(itemData)) {
            itemData = [itemData];
        }
        return itemData;
    }

    function array_match_check(arr1, arr2) {
        var arrCheck = false;
        for (var i = 0; i < arr1.length; i++) {
            if(arr2.indexOf(arr1[i]) >= 0) {
                arrCheck = true;
                break;
            }
        }
        return arrCheck;
    }

ALLをクリックで、何にもis-hideクラスがついていない、元のhtmlに書き換えるようにしました。
これで、表示の切り替えの実装はできたのですが、$('.contents-wrapper').html(defaultHTML); で元のhtmlに書き換えた後のページで

    $('label').on('click', function(){
        $(this).toggleClass('is-active');
    });

が効かなくなってしまいました。
表示の切り替えは動作するのですが、もう一度#allボタンを押しても動作しません。
jQueryで動的にDOMを生成すると、その要素に対してイベントを生成するには通常の方法ではイベントが効かなくなる、ことは調べてわかりました。
この状態からイベントを発生させる方法について、ご助言いただけますと幸いです。
よろしくお願いいたします。

Comments

[yambejp]

他人のサイトのサンプルで質問するのはどうかと・・・
ご自身なりにHTMLとjsのソースを提示して質問してください

Answer 1

    $(document).on("click", "label", function(){
        $(this).toggleClass('is-active');
    });コード

    $(document).on("click", '#all', function(){
        $('.contents__wrap').html(defaultHTML);
    });

上記に書き換えることで解決しました。