$( document ).ready(function() { console.log( "ready!" ); var counter = 0; $("button").click(function() { e="<p class='test' _=\"on click append 'click me' to value of the #search\">click me</p>" $("h2").append(e) }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/hyperscript.org@0.8.1"></script> <input id="search" /> <button>generate new element</button> <h2></h2>El jquery funciona, pero el hiperíndice no agrega texto al cuadro de entrada.
Bueno, su código de hiperíndice parece funcionar como pretendía. El jQuery parece ser el roto. Si quiere agregar al valor que el usuario está escribiendo. Deshazte de la adición de jQuery y solo usa _hyperscript.
<script src="https://unpkg.com/hyperscript.org@0.8.1"></script> <input id="search" /> <button _="on click append 'click me' to value of the #search">generate new element</button> <h2></h2>