为什么我的委派事件处理程序不触发？

因此，我在脚本标记内有以下html按钮。这样做的目的是防止它在最初加载到页面上时在页面重新加载时没有轻微的闪烁。

<script id="pagination" type="text/template">

    <input type = "submit" value = ">" id = "nextbutton" class = "scanbutton" style =  "width: 40px; height: 26px" />

</script>

<input type="submit" id="first" value="Clix">
<div id="paginationbuttons"></div>

然后是jQuery：

  $('#first').on('click', function() {
    var pageButtons= $('#pagination').html();
    $('#paginationbuttons').html(pageButtons);
    alert('good so far');

  });   

  $('#paginationbuttons').on('click', ':button', function () {
    alert('good again'); // No luck here
  });

我可以使用首次点击事件从脚本中提取html，但是当js读取页面时，下次点击事件似乎没有绑定（没有运行第二个警报）。我的问题在哪里？JSFIDDLE