JsRender前端渲染模板-jquery方法失效

在使用JsRender前端渲染模板的元素，在对这些元素进行jquery的方法，则无效。

场景：

使用jsrender 循环渲染一组数据到页面，然后对每组元素点击操作，无效果。

代码如下：

 <script id="groupTemplate" type="text/x-jsrender">
                            {{for data}}
                            {{if id == 0}}
                                <div class="zent-radio-wrap zent-radio-checked group_el" g_id="{{:id}}" is_default="{{:is_default}}" >
                            {{else}}
                                <div class="zent-radio-wrap  group_el " g_id="{{:id}}" is_default="{{:is_default}}">
                             {{/if}} 
                                    <div class="category-item">
                                        <span class="category-name">{{:g_name}}</span><span class="category-num">{{:num}}</span>
                                    </div>
                                </div>
                                {{/for}}
                        </script>
                        <div class="zent-radio-group category-list is-overflow" id="grouplist_div"></div>

点击的方法：

            $("#grouplist_div .group_el").click(function () {
                alert("为啥没效果？");
                });

在网上查阅资料后发现动态添加的标签要事件委托才能获取到节点，也就是说要用：

$(selector).on(events,[selector],[data],fn)

上述问题的代码正确的如下：

  $("#grouplist_div").on('click','.group_el',function () {
                //点击分组
                alert(333);
                var g_id = $(this).attr("g_id");
                var is_deault = $(this).attr("is_default");
                console.log(g_id);
                console.log(is_deault);

            });

 

注意： #grouplist_div为动态添加节点的父级节点，请使用非动态添加的父级节点，不然同样获取不到。