Как написать эффективные Jquery Слушатели событий?

Question

Я работаю над проектом, где у меня есть тонна флажков. Если этот флажок установлен, эти флажки «отображают» элемент Div на панели инструментов. Затем элемент span добавляется к скрытому элементу div. Существует также функция cleanUp (), которая заботится об очистке элемента при изменении в панели инструментов. Существует функция putOverlay (), которая заботится о наложениях, которые должны быть показаны. Теперь с около 400 флажками, которые скрывают / показывают один из соответствующих элементов на панели инструментов. Моя функция выглядит примерно так.

 $(document).ready(function() {
            $("#sel,.show-item").on('change', '[type=checkbox]', function() {
                console.log("Im trying");
                var checked = $(this).attr('id');
                console.log(checked);
                if ($(this).is(':checked')) {
                    $("#stickyFilters").show();
                    $('#taxIA').show();
                    $('#taxIA').append('<p id="' + checked + '" class="remove" style="display:inline; float:left"><span id="' + checked + '">' + checked + '<input type="button" value="X"></input></span></p>');
                    putOverlay();
                } else {
                    $('#taxIA span[id^="' + checked + '"]').remove();
                    cleanUp();
                    putOverlay();
                }
            });
        });

Теперь проблема в том, что с таким количеством флажков мне приходится повторяться, и это, безусловно, не самый эффективный способ написания JQuery. Я не касаюсь принципов хорошего кода. Так что мой код "WET" (напишите все дважды).

Я попытался обернуть 2 изменяющиеся части функции - прослушиватель флажка и соответствующий div в объекте и создать динамический приемник c для событий смены флажка. Но это не похоже на подход, который бы работал. Любые предложения о том, как я не мог повторить себя и написать более эффективно Jquery? Любая помощь приветствуется.

Вот пример флажка, установленного в приложении.

Секция флажка:

 <div id="collapseMain" class="panel-collapse collapse in">
        <div class="panel-body">
            <!-- Differed Panel Group 2  -->
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <input type="checkbox" class="invertebrateAnimals" id="invertebrateAnimals"></input>&nbsp;
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="invertebrateAnimals">
                                Invertebrate Animals
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body" id="selectionInvertebrateAnimals" class="selectionInvertebrateAnimals">
                            <p id="sel">
                                <input type="checkbox" id="Arachnida (Spiders, Mites, Ticks, Scorpions, and relatives)">&nbsp;&nbsp;Arachnida (Spiders, Mites, Ticks, Scorpions, and relatives)
                                </input><br>
                                <input type="checkbox" id="Bivalvia (Mussels and Clams)">&nbsp;&nbsp;Bivalvia (Mussels and Clams)</input><br>
                                <input type="checkbox" id="Branchiopoda (Fairy Shrimp, Clam Shrimp, Water Fleas, and Tadpole Shrimp)">&nbsp;&nbsp;Branchiopoda (Fairy Shrimp, Clam Shrimp, Water Fleas, and Tadpole Shrimp)
                                </input><br>
                                <input type="checkbox" id="Clitellata (Leeches)">&nbsp;&nbsp;Clitellata (Leeches)
                                </input><br>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Секция панели управления, в которой есть DIV, которые скрывают и отображают действие прослушивателей событий:

<div class="col-sm-9" id="showHide">
        <div id="stickyFilters" class="wrapper" style="background-color : #ced4c4;" data-step="9" data-intro='<p class="italic">Dashboard</p><br>The dashboard area shows you, at a glance, which filters you currently have set. You can click the red "X" next to a filter to remove it.'>
            <div class="row" id="rowA" style="width: auto;">
                <div class="majorTaxGroup">
                    <div id="taxIA" class="dashBoard"><b>Invertebrate Animals : </b></div>
                    <div id="taxVP" class="dashBoard"><b>Vascular Plants : </b></div>
                    <div id="taxVA" class="dashBoard"><b>Vertebrate Animals : </b></div>
                </div>
            </div>
        </div>
    </div>

Изменение в секции секции флажка вызывает событие, а затем соответствующим образом общается с отделом панели мониторинга. Кроме того, я написал событие, которое отслеживает любые изменения в DOM с помощью события привязки DOM, если изменяется содержимое. Это, в частности, не делает ничего, кроме console.log (), что-то изменилось в разделе панели инструментов.

$('#stickyFilters').bind('contentchanged', function() {
    console.log('CHANGED SOMETHING IN THE STICKYFILTERS!!!!');
});