Question

我正在尝试向文档加载后动态添加到页面的元素添加click事件，但它不起作用，尽管这似乎是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());
    })
});

将其置于初始化之下，如上面的小提琴。

将Click事件添加到从Mustache动态呈现的元素中？

1 个答案: