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

위의 피들과 같은 초기화 아래에 추가하십시오.