javascript - 将单击事件添加到从 Mustache 动态渲染的元素中？

Question

我正在尝试向文档加载后动态添加到页面的元素添加单击事件，但它不起作用，尽管这似乎是 a well-known problem with a clear answer 。这是我的代码:

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

复杂的因素可能是该元素位于 Mustache 模板内，该模板本身由 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 的链接:http://jsfiddle.net/8o12v2xs/9/

Answer 1

我自己对 Carto 不太熟悉，但一旦你等待该元素存在，它似乎就可以正常工作。 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());
    })
});

将其放在初始化下方，如上面的 Fiddle 所示。