CODEWITHSUNDEEP
jquerytemplateshandlebars.js
Harry
Harry

Reputation: 4773

Click event not working inside handlebar template

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

Upvotes: 3

Views: 6985

Answers (1)

mu is too short
mu is too short

Reputation: 434845

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/

Upvotes: 11

Related Questions