ハンドルバーのjQuery onClickイベントの処理

Question

ハンドルバーテンプレートでUIを動的にするために、単純なjQuery onClickイベントを設定したいと考えています。私は、特定のクリックの後にclassClass（）を追加することを考えていました。

は（ハンドルバーによって生成された）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"); 
}); 

このコードは、私のハンドル・テンプレートに行くべきですか私はそれのために特定のヘルパーにそれを書き換える必要がありますか？私はそれを勉強することができるように提供することができますし、同様の何かを開発する例がありますか？

ありがとうございます！

Answer 1

ノードをDOM HTMLに挿入した後に、Jqueryリスナーをリフレッシュする必要があります。このことができます

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

希望：

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

Answer 2

あなたの問題は正確にはわかりません。 JavaScriptを* .jsファイルに保存した場合、perhapsの場合はprev()の代わりにparent（）を使用してください。

Answer 3

は、ドキュメントレベルでそれらを定義している場合は、すべての動的なDOMの更新時にイベントハンドラを再接続する必要はありません！ :-)