处理车把上的 jQuery onClick 事件答案

【问题标题】：handling jQuery onClick event on handlebars处理车把上的 jQuery onClick 事件
【发布时间】：2013-07-09 12:33:06
【问题描述】：

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

考虑 HTML（由车把生成）

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

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

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

此代码应该放在我的车把模板上，还是应该将其重写为特定的帮助程序？是否可以提供任何示例，以便我可以研究它然后开发类似的东西？

提前致谢！

【问题讨论】：

您应该将html、css 和js 分开。如果您从模板创建某些内容，您应该知道应该在模板中执行哪些操作。（要么是因为您使用模板从服务器发送此信息），要么因为您已经在代码中知道。因此，在附加模板后为您的事件注册 callbacks，或者您将使用 delegate 进行事件（类似于：$(containerWhereYouAddThetemplateTo).on("click", ".myButton", function() {});
上面关于代表团的评论是我解决问题所需要的。

标签： javascript jquery handlebars.js

【解决方案1】：

如果您在文档级别定义事件处理程序，则无需在每次动态 DOM 更新时重新附加事件处理程序：

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

希望这会有所帮助！ :-)

【讨论】：

字。这样做。但我喜欢通过将“文档”替换为最近的可渲染节点来尽可能缩小范围，例如您渲染车把模板的 div。

【解决方案2】：

在将节点插入 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"); });

【讨论】：

【解决方案3】：

我不确定您的问题到底是什么。如果您将 JavaScript 保存在 *.js 文件中，则这样是正确的，在这种特定情况下，perhaps 使用 parent() 而不是 prev()。

【讨论】：

问题是事件没有被触发，因为添加 jQuery 根本不起作用（此代码实际上在车把模板上而不是外部 js 上）。（顺便说一句，为了更好的代码可读性，我从 prev() 更改为 parent()）