Mustacheから動的にレンダリングされた要素にクリックイベントを追加しますか？

Question

ドキュメントの読み込み後にページに動的に追加される要素にクリックイベントを追加しようとしていますが、動作していませんが、これはa well-known problem with a clear answerのようです。これは私のコードです：

$('body').on('click', "#clickme", function() { 
    alert('clicked!', $('#cartodb_id').text()); 
    }); 

の複雑な要因は、要素がCartoDB.jsによって、自身がページに動的にレンダリングされる口ひげテンプレート内にあるということがあります。

<div id="map"></div> 
<script type="infowindow/html" id="infowindow_template"> 
    <div class="cartodb-popup"> 
    <a href="#close" class="cartodb-popup-close-button close">x</a> 
    <div class="cartodb-popup-content-wrapper"> 
     <div class="cartodb-popup-content"> 
     <h4>cartodb_id: </h4> 
     <p id="cartodb_id">{{content.data.cartodb_id}}</p> 
     <input type="submit" id="clickme" value="clickme" /> 
     </div> 
    </div> 
    <div class="cartodb-popup-tip-container"></div> 
    </div> 
</script> 

これは私に影響を与えるべきですイベントを動的に追加する機能はありますか？

フルに問題を示すJSFiddleへのリンク：自分Cartoのとhttp://jsfiddle.net/8o12v2xs/9/

Answer 1

あまりにも精通していないが、あなたが存在する要素のを待ついったん正常に動作するようです。 http://jsfiddle.net/8o12v2xs/10/

// register events once it's available 
sublayer.on('featureClick', function(e, latlng, pos, data) { 
    $('#clickme').on('click', function() { 
     alert('clicked!', $('#cartodb_id').text()); 
    }) 
}); 

これを上記フィドルのように初期化します。