Bind to click-event to dynamically created button without selector

Question

I'm trying to dynamically create elements using javascript and jQuery. Currently I'm stuck with binding a simple click-event to a dynamically created button-element.

The button is created with

var theButton = $("<button>...</button>");

Now I want to bind the click-event, so I added

theButton.on("click", function(){...}); // which is not working

Other solutions pointed out, that it must be bound to a container. So I ended up with

$(document).on("click", theButton, function(){...}); // this fires no matter where I click

The problem is the selector (2nd param of the on method) which is a jQuery-object at this point.

Also tried

theButton[0].onclick = () => alert("Clicked")

which is also not working

Answer 1

Try this. It's working

$(function(){
   var theButton = $("<button>button</button>");
   theButton.click(function(){
      alert('clicked');
   })
   $('body').append(theButton);
})

Working fiddle