javascript, jQuery: How to re-listen for click events

Question

I am listening for click events on the class notification-link:

$(document).ready(function(){
    $('.notifications-link').click(
        function(){
            $('.notifications-popup').addClass('show')
        }
    )
});

Works fine. The problem is, if I append a new Element with the class notification-link to the DOM, jQuery doesn't listen for it = if you clicked on the appended Element, nothing happens.

How can I fix that?

you need attach even handler to those newly created elements dynamically. You can do so by using jquery. — Will, Oct 20 '16 at 19:27
How do I do this with jQuery? That's basically the whole question :-) — jonhue, Oct 20 '16 at 19:28

score 1 · Accepted Answer · answered Oct 20 '16 at 19:27

1

instead of

$('.notifications-link').click(function(){...})

use

$(document).on("click", ".notifications-link", function(){...});

this way you're attaching the event to the document and then checking to see if the click landed on ".notifications-link" and will work will all newly added ".notifications-link"'s

answered Oct 20 '16 at 19:27

I wrestled a bear once.

19,489
16
63
110

awesome. works. thanks. :) . – jonhue Oct 20 '16 at 19:32
@klvler - happy to help. if you would like to learn more check [this page](https://learn.jquery.com/events/event-delegation/) out. if this resolved your problem please hit the check mark as well. good luck. – I wrestled a bear once. Oct 20 '16 at 19:33
hitting it since seven minutes - is saying there is still one to go – jonhue Oct 20 '16 at 19:40

score 0 · Answer 2 · answered Oct 20 '16 at 19:31

0

You need to use event delegation for the events to work on the elements added via JS.

$(document).ready(function () {
    $('body').on('click', '.notifications-link', function (e) {
        $('.notifications-popup').addClass('show');
    });
});

For detailed explanation about how Jquery event method like on, click etc works please check this post: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

answered Oct 20 '16 at 19:31

anshu purohit

150
9

that article explains in depth how actually things works. – anshu purohit Oct 20 '16 at 19:38
it explains 4 methods, three of which are deprecated. – I wrestled a bear once. Oct 20 '16 at 19:42

javascript, jQuery: How to re-listen for click events

2 Answers2