Jquery 单击事件不在把手模板内工作

我的模板是这样的

{{#users}}
 <div id="userRoleInfo">
        <input type="hidden" id="userId" value="{{id}}" />
        <div class="label">
            <label>User permission</label>
        </div>

     <div class="user-item-right">
// I want to capture click event of this anchor tag
            <a href="#" class="updown-arrow" onClick="callUserDetail()" data-control="userBtn"><i class="icon-arrow-big"></i></a>
          </div>    

        {{#checkUser ../user.roleId roleId ../roles}}
            <div >Administrator</div>
        {{else}} 
            <select id="selRoleId" data-custom="true">                                                   
                    <option value="0" >Assign Role</option>

                {{#each roles}}
                    <option value="{{roleId}}">{{name}}</option>
                {{/each}}

            </select> 
        {{/checkUser}}

   </div>

 {{/users}} 

但它并没有进入这个函数

更新

我尝试使用javascript方法调用

  function callUserDetail(){
japp.users.bindEdit();
}

但这需要点击两下才能完成

---

这应该有效还是有其他方法可以做到这一点。如果需要更多信息，请告诉我您的问题就在这里：

jQuery('[data-control=userBtn]').each(function() {
    jQuery(this).live('click', function (e) { /* ... */ });
});

当您尝试在页面上迭代时，页面上不会有任何

[data control=userBtn]

元素。那些

理想情况下，您应该有一个已知的容器，可以将模板放入其中。然后你会说：

$('#container').on('click', '[data-control=userBtn]', function(e) {
    // Deal with the click in here.
});

并将填写好的模板放入
#容器中

演示：

如果您没有这样的容器，那么您可以在

上使用活生生的

：

$(document).on('click', '[data-control=userBtn]', function(e) { ...

演示：
非常感谢，伙计。这是一个完美的工作方式，投票支持用例子进行很好的解释
jQuery('[data-control=userBtn]').each(function() {
    jQuery(this).live('click', function (e) { /* ... */ });
});

$('#container').on('click', '[data-control=userBtn]', function(e) {
    // Deal with the click in here.
});

$(document).on('click', '[data-control=userBtn]', function(e) { ...