'Binding multiple event handlers after ajax load

I am loading some content in to an html div using the .load() method.

$("#cards").load("/cards/?offset="+offset);

the new content contains several <a> to which I would like to bind event handlers. For the first, I am using the .on() method:

$('body').on('click', '#excerpt-slide', function() { alert('Link 1 Clicked'); } 

When I attempt to bind the second event handler to a different <a>, clicking the link does not trigger the anonymous function:

$('body').on('click', '#add-count', function() { alert('Link 2 Clicked'); }

Do I need to unbind click event handlers for them to work properly?

Please help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source