Click event not working inside handlebar template

Question

My Template is like this

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

This whole template is appended inside

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

I want to display user info when I click on anchor tag inside

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

function I have written for click event is like this

   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));
        }
    });
});

but its not going inside this function

Update

I tried to call using javascript method like

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

But it takes 2 clicks to work this

Is this should work or is there other way to do this. Please let me know if more information is needed

Answer 1

Your problem is right here:

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

There won't be any [data-control=userBtn] elements on the page when you try to iterate over them. Those <a>s won't exist until after you've added the filled in template to the page. Also, live was deprecated way back in jQuery 1.7 and removed in 1.9 so you shouldn't be using it anymore, you should be using on instead.

Ideally, you'd have a known container that you'd put your template into. Then you would say:

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

and throw the filled in template into #container.

Demo: http://jsfiddle.net/ambiguous/PhtP3/

If you don't have such a container, then you could use the live-ish form of on:

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

Demo: http://jsfiddle.net/ambiguous/ZaLnq/