Почему мой делегированный обработчик событий не запускается?

Question

Итак, у меня есть следующая кнопка 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

Answer 1

Вы используете селектор :button, чтобы выбрать input[type=submit]. Измените свой селектор на :input или измените ваши метки на button или input[type=button].