Appended anchor tag click event does not adding active class to it. (appended tag is generated by click event of another anchor tag)

Question

Thanks in advance for help.

You can better understand problem by observing following code:

<a class="save-btn" href="#">Save</a>

<ul><li><a href="#">link 1</a></li></ul>

$('.save-btn').click(function() {
    $('ul').append('<li><a class="newLink" href="#">link 2</a></li>')
    return false;
})

$('.newLink').click(function() {
    $(this).addClass('active') // ".newLink" is not adding "active class"
   return false;
});

I want to simply add active class to link having class name "myLink" by click event.

I know the problem is "click event", appended anchor tag on window.load is adding active class perfectly.

Here is image for more clarification

Image Description: Link "Abc Xyz" should add "active class" on click (active link will have blue background according to my image)

Answer 1

At the moment you bind the click event to $('.newLink'), there is no link with that class in the page yet. Use this to bind on any current or future elements matching the selector: $(document).on('click', '.newLink', yourcallbackfunction);