Question

I have a div element which I append to body element

$('<div class="tooltip"></div>').appendTo('body');

and assign to it some html

$('div.tooltip').html('<a class="closeme">close me</a>');

I want that when user click on the close me link the append div will be removed
so I did

$('a.closeme').click(function(){
    $('div.tooltip').remove();
});

but I didnt get any response even if I try a simple

$('a.closeme').click(function(){
    alert('hi');
})

I didn’t get any response.
I suspect that it is behave like this due to the fact that I use the appenTo method . I will appreciate if someone could tell me how I can invoke auction from inside an appentTo element

Answer 1

Use the on() method to attach events to an element that’s currently present, or will be present in the future:

$('parentElementSelector').on('click','.tooltip',
    function(){
        alert('the tooltip was clicked!');
    });

In your case, since you’re appending to the body element:

$('body').on('click','a.closeme',
    function(){
        $(this).closest('.tooltip').remove();
    });

Reference:

• closest().
• on().
• remove().