Question

Here’s my code:

$("#strong-against .pick .data .actions .btn-success").on("click", function () {
    //Magic here.
});

I read that I should use .on() as that would dynamically attach events to items added even after the document finishes loading.

Yet, the event is not being fired after I load these items dynamically. How can I make it so that any items I add after the document load are listened to?

Answer 1

Try,

$(document).on("click", "#strong-against .pick .data .actions .btn-success", function () {
    //Magic here.
});

Follow the 2 steps to bind event handler for dynamic elements,

1. Find the closest parent elements to which the element will be added dynamically.
2. Bind the handler to parent element with the dynamic elements selector as the 2nd argument.

So if #strong-against exist on page load then you can,

 $("#strong-against").on("click", ".pick .data .actions .btn-success", function () {
    //Magic here.
 });