在把手上处理jQuery onClick事件

Hal*_*Hal 14 javascript jquery handlebars.js

我想设置一个简单的jQuery onClick事件,以使UI在手柄模板上动态化.在特定点击后我想知道addClass().

考虑HTML(由把手生成)

  {{#if hasButton}}
      <div id="container">      
          <button type="submit" class="myButton">Click me!</button>
      </div>
  {{/if}}
Run Code Online (Sandbox Code Playgroud)

即:在按钮内单击后,其容器将接收一个加载类,该类将使用CSS创建交互.

$(".myButton").on("click", function(event){
        $(this).parent().addClass("loading");
});
Run Code Online (Sandbox Code Playgroud)

这段代码应该放在我的把手模板上,还是应该把它重写成一个特定的助手呢?有没有可以提供的例子,所以我可以研究它然后开发类似的东西?

提前致谢!

mur*_*nax 41

如果您在文档级别定义事件处理程序,则无需在每个动态DOM更新上重新附加事件处理程序:

$(document).on('click','li',function(){
   alert( 'success' );
});
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!:-)

  • 字.这样做吧.但是我喜欢通过将'document'替换为最接近的可渲染节点来尽可能地缩小范围,就像你渲染了车把模板的div一样. (4认同)

Nic*_*rge 14

在将节点插入DOM HTML之后,您必须刷新Jquery侦听器.

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"); });
Run Code Online (Sandbox Code Playgroud)