在JS中创建的按钮没有事件

Question

我认为这是一个简单的问题。我做的是当我点击一个按钮'添加'并将其附加到现有div时，在JS中创建一个'删除'按钮。

这很有效。但是对于新创建的按钮'删除'我想要触发一个新事件 - 删除事件。这没用。这有什么问题？

$(document).ready(function() {

  $('#mybutton').on('click', function() {
    $('#dateTimeSelector').append('<button type="button" class="btn btn-link removedate" rel="contents" title="Termin entfernen">remove</button>');
  });

  $('.removedate').on('click', function() {
    console.log('remove #dateTimeBox_' + $(this).data());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybutton">
  add
</button>
<div id=dateTimeSelector></div>

Answer 1

您需要在放置到页面后绑定新的removeate click事件，因此在#mybutton单击处理程序中。

这是因为当removeate的click处理程序添加在页面加载时附加时，jquery选择器中没有匹配项。