class not listening to events

Question

I have this javascript-code:

$('.get_summary').click(function(ev){
    alert("get_summary");
});

html-buttons with that class are created dynamically in javascript. With firebug I can see that the button got the class "get_summary". However, when I click on the button nothing happens. Neither any error in the console are written.

Looking at "Events"-panel in chrome I see that the button is actually not listening to any event. Why? I put an alert in the file where the class got bind to a function. And the alert shows up. I really dont know where I should look to understand why the class is not listening to the function.

Can you post the code that genrates the HTML? – zer00ne Mar 05 '16 at 18:41 — zer00ne, Mar 05 '16 at 18:41

score 5 · Accepted Answer · answered Mar 05 '16 at 18:42

When you call $('.get_summary'), it only applies to the elements that exist at the time of the call. If you create buttons later, they won't listen for the event.

What you can do is put an event listener on the parent:

$('.parent').on('click', '.get_summary', function(ev){
    alert("get_summary");
});

score 4 · Answer 2 · answered Mar 05 '16 at 18:41

4

Dynamically generated element needs event delegation. Try like following.

$(document).on('click', '.get_summary', function(ev){
    alert("get_summary");
});

answered Mar 05 '16 at 18:41

Ibrahim Khan

20,616
7
42
55

class not listening to events

2 Answers2