javascript - jQuery .click() 不会从 mustache.js 模板中的 触发

Question

我正在试验 Mustache.js，我无法从模板呈现的链接中触发 .click() 事件。

// click on tab to reveal information below
$(".tab").on("click", function(){
  var name = $(this).attr('data-name');
  var data = {"class":"lisa","name":"Lisa Jones","age":"http://lisajones.com","address":{"streetAddress":"88 High Street","city":"Birmingham","postCode":"B1 2AA"},"workNumber":"+44 1234 474747","contactableAtHome":false,"personalNumbers":[{"type":"tel","number":"+44 1234 111222"},{"type":"mobile","number":"+44 7987 444555"}],"biography":"lisa ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."};

    var template = $('#infoContact').html();
    var html = Mustache.to_html(template, data);
    $('#content').html(html);

});

// everytime an a is clicked this should fire
$("a").on("click", function(){
  alert("An <a> tag has been clicked on...")
});

</script>

<script id="infoContact" type="text/template">
  <div class="side-panel">
    <ul>
      <li><a href="#">But if you click on this nothing happens...</a></li>
    </ul>
  </div>
</script>

正如您在上面看到的，在任何地方点击一个链接都会触发一个警报。有什么想法吗？

Answer 1

由于您使用的是模板语言，因此将动态创建元素，因此请尝试 event delegation

$(document).on("click", "a", function () {
    alert("An <a> tag has been clicked on...")
});