$( 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>The jquery works, but the hyperscript doesn't append text to the input box.
Well, your hyperscript code appears to work like you intended. The jQuery seems to be the broken one. If you mean to append to the value that the user is typing. Ditch the jQuery appending and just use _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>