jquery - 单击事件在 Handlebars 模板内不起作用

Question

我的模板是这样的

{{#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}} 

整个模板附加在里面

 <div id="usersMgmtDiv" class="user-mngt-wrapper clearFix">
 </div>

我想在点击里面的 anchor 标记时显示用户信息

  <div class="user-item-right"> 

我为点击事件编写的函数是这样的

   japp.users.bindEdit = function () {

 if (jQuery('[data-control=userBtn]').size() === 0) {
    return;
 }

var self = japp;

jQuery('[data-control=userBtn]').each(function() {
    jQuery(this).live('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if(jQuery(this).is('.active')){
            self.users.hideUserBox(jQuery(this));
        } else {
            self.users.showUserBox(jQuery(this));
        }
    });
});

但它不会进入这个函数

更新

我尝试使用 javascript 方法进行调用，例如

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

但是需要点击 2 次才能完成此操作

这应该有效吗？或者还有其他方法可以做到这一点吗？如果需要更多信息，请告诉我

Answer 1

您的问题就在这里:

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

不会有任何[data-control=userBtn]当您尝试迭代页面上的元素时。那些<a>在您将填写的模板添加到页面后， s 才会存在。另外，live早在 jQuery 1.7 中就已被弃用，并在 1.9 中被删除，因此您不应该再使用它，您应该使用 on 相反。

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

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

并将填写好的模板放入 #container .

演示:http://jsfiddle.net/ambiguous/PhtP3/

如果您没有这样的容器，那么您可以使用 on 的 live-ish 形式:

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

演示:http://jsfiddle.net/ambiguous/ZaLnq/