Cannot access jQuery when appending

Question

I append a button via jQuery.

$('#toAppend').html('<input type="button" id="helloWorld">');

In my browser, I can see the button but I am not able to access it via jQuery.

Code:

$('#helloWorld').click(function () {
    alert("you clicked me");
})

Any help is appreciated.

Thanks.

Answer 1

You have to access it in a different manner because it was appended to html after the page was loaded:

$("#toAppend").on("click", "button#helloWorld", function(e) {
    console.log("clicked!");
});

Answer 2

Use on() like this for Event Delegation:

$(document).on('click', '#helloWorld', function () {
  alert("you clicked me");
})