Javascript JQuery tmpl+复选框计数

我正在使用jQuery模板，它在模板中包含复选框。但我想数一数复选框的数量，并显示在主手风琴中。但是jQuery change listen事件不会读取复选框中的更改

data.json

[
{
    "prefixid" : 1,
    "heading" : "Prefix",
    "division" : [
        {"id" : 1, "name" : "Option1"},
        {"id" : 2, "name" : "Option2"},
        {"id" : 3, "name" : "Option3"}
    ]
},
{
    "prefixid" : 2,
    "heading" : "Owning District",
    "division" : [
        {"id" : 1, "name" : "Option1"},
        {"id" : 2, "name" : "Option2"},
        {"id" : 3, "name" : "Option3"}
    ]
},

...
]

jQuery模板

 <div class="col-md-12 accord-filter scrollbox2">
    <div class="panel-group" id="accordion">
          <script id="filterColumn" type="text/x-jQuery-tmpl">
            <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse-${prefixid}">
                        ${heading}

                        <span class="accordion-toggle">
                        <span class="checkcount">(<span class="count-${prefixid}">0</span>)</span></span>
                    </a>
                  </h4>
                </div>
                <div id="collapse-${prefixid}" class="panel-collapse collapse">
                  <div class="panel-body scrollbox2">
                   <div class="right-inner-addon">
                    <i class="icon-search"></i>
                    <input type="search" class="form-control" placeholder="Search">
                  </div>
                    {{each(prop, val) division}}
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="" data-header="${prefixid}" data-select="${val.id}"> ${val.name}
                        </label>
                      </div>
                     {{/each}}
                  </div>
                </div>
            </div>
          </script>
    </div>
</div>

javascript

    $.unify = {};
    $.unify.constant = {};
    $.unify.constant.filter = {};
    $.unify.filter = {};
    $.unify.filter.checkboxcount = [];

    $(document).ready(function(){
        $.unify.filter.readFilterData();
        $.unify.filter.templateFilter();
    });

    $.unify.filter.readFilterData = function() {
        $.ajaxSetup({ cache: false });

        $.ajax({
            type: "GET",
            url: 'data.json',
            dataType: "json",
            async: false,
            beforeSend:function() {
                console.log(' => [INITIATED] {FILTER} Read Data.');
            },
            success: function($data) {
                $.unify.constant.filter = $data;
                console.log(' => [SUCCESS] {FILTER} Read Data.');
            },
            error: function() {
                console.error(' => [ERROR] {FILTER} Read Data.');
            }
        });
    };

    $.unify.filter.templateFilter = function() {
        console.log($.unify.constant.filter.length);

        for (var i = 0; i <  $.unify.constant.filter.length; ++i) {
            $.unify.filter.checkboxcount[i+1] = 0;
        }

        $('#filterColumn').tmpl($.unify.constant.filter).each(function (index) {
            console.log(index);
        }).appendTo('#accordion');
    };

    $('#accordion input[type="checkbox"]').change(function() {
        console.log('Clicker');
        var $prefix = $(this).data('header');
        var $select = $(this).data('select');
        if($(this).is(':checked')) {
            $.unify.filter.checkboxcount[$prefix] += 1;
        } else {
            $.unify.filter.checkboxcount[$prefix] -= 1;
        }
        $('.count-' + $prefix).html($.unify.filter.checkboxcount[$prefix]);
    });

    $('[name="filter-clear-all"]').on('click', function(){
        $('#accordion .group input[type="checkbox"]').attr('checked', false);
        for (var i = 0; i <  $.unify.constant.filter.length; ++i) {
            $('.count-'+(i+1)).html('0');
        }
    });

plnkr链接中给出了完整的示例，这可能会有所帮助

$("#chk").change(function() {
   alert("triggered!"); 
});

$("#trigger_btn").click(function(e) {
    e.preventDefault();
    $("#chk").trigger("change");
});

---

我不认为这是我所期望的，如果你能在plnkr链接中解释这一点会更好，但为了确保，你不想在按下复选框时增加/减少计数器吗？我找到了答案，我只是将函数包装在$function{…}；很好，这个plnkr看起来比小提琴好也许我会看看