Question

I have a DIV element.

<div id="testButton"> Test Button </div>

I’m gonna click on it, and then another element will be appended in Another DIV Element

$("#testButton").click(function() {

$("#testDiv").append('<div id="test">Test</div>');

});

Now I want to Click on the appended element to hide the first element.

$("#test").click(function() {

$("#testButton").hide();
});

But that doesn’t work…

Answer 1

As long as the element didn’t exist on the moment of attaching event handler to it – it doesn’t work.

You may use this solution instead:

$(document).on('click', '#test', function() {
    $("#testButton").hide();
});

Or, if there is some particular block already on a page – you could use more specific selector like

$('#testDiv').on('click', '#test', function() {
    $("#testButton").hide();
});