在句柄上处理jQuery onClick事件 [英] handling jQuery onClick event on handlebars

问题描述

我想设置一个简单的jQuery onClick事件来使UI在句柄模板上动态变化。我想知道在特定的点击后添加Class（）。

考虑HTML（由句柄生成） if hasButton}}
< div id =container>
< button type =submitclass =myButton>点击我！< / button>
< / div>
{{/ if}}

即：点击一个按钮后，将收到一个加载类，它将创建使用CSS的交互。

$ $ $（。myButton）。on（click ，function（event）{
$（this）.parent（）。addClass（loading）;
}）;

这段代码应该放在我的handlebars-template上，还是应该将它重写为特定的帮助器？是否有任何可以提供的例子，以便我可以研究它，然后开发类似的东西？

预先感谢！

解决方案

在将节点插入到DOM HTML后，必须刷新Jquery侦听器。

  var source =< li>< a href ={{uri}}> {{label}}< / a>< / li>; 
 var template = Handlebars.compile（source）; 
 var context = {uri：http://example.com，label：我的标签}; 
 $（ul）。append（template（context））; 
 
 //添加您的JQuery事件侦听器
 $（li）。click（function（）{alert（success）;}）; 
  

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!

解决方案

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

这篇关于在句柄上处理jQuery onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！