15

I would like to set up a simple jQuery onClick event to make the UI dynamic on a handlebars template. I was wondering to addClass() after a specific click.

consider the HTML (generated by handlebars)

  {{#if hasButton}}
      <div id="container">      
          <button type="submit" class="myButton">Click me!</button>
      </div>
  {{/if}}

i.e: After a click within a button, its container will receive a loading class that will create the interaction using CSS.

$(".myButton").on("click", function(event){
        $(this).parent().addClass("loading");
});

This code should goes on my handlebars-template or should I rewrite it into a specific helper for it? Is there any examples that could be provided so I can study it then develop something similar?

Thanks in advance!

2
  • 1
    You should keep html, css and js separated. If you create something from a template you should know which actions should take place in the template. (either because you send this information with the template from the server) or because you already know in your code. So either register the callbacks for your event after you appended the template or you would use delegate for events ( something like: $(containerWhereYouAddThetemplateTo).on("click", ".myButton", function() {});
    – t.niese
    Jul 9, 2013 at 13:26
  • The comment above about the delegation was all I needed to resolve my issue.
    – HPWD
    Sep 1, 2018 at 1:23

3 Answers 3

42

there is no need to reattach the event handler on every dynamic DOM update if you're defining them at document level:

$(document).on('click','li',function(){
   alert( 'success' );
});

Hope this helps! :-)

1
  • 4
    Word. Do it this way. But I like to narrow as much as possible by substituting 'document' for the closest renderable node, like the div you rendered the handlebar template in. Jul 24, 2015 at 20:08
15

You have to refresh your Jquery listeners AFTER the insertion of nodes into your DOM HTML.

var source   = "<li><a href="{{uri}}">{{label}}</a></li>";
var template = Handlebars.compile(source);
var context = {"uri":"http://example.com", "label":"my label"};
$("ul").append( template(context) );

// add your JQuery event listeners
$("li").click(function(){ alert("success"); });
0

I am not sure what your problem exactly is. It's correct like this if you keep your JavaScript in a *.js file, perhaps using parent() instead on prev() in this specific case.

1
  • The problem is that the event isn't being triggered because adding that jQuery simply do not works (this code actually goes on handlebars template not an external js). (btw i changed from prev() to parent() for better code readability)
    – Hal
    Jul 9, 2013 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.