Ajax成功事件未触发动态添加的链接

Question

In my rails 4 app I am having trouble getting ajax "success" event triggering for links that are added to a page dynamically with jquery. I am creating markup like the following and dynamically adding it to a page.

<a data-confirm="Are you sure?" data-method="delete" data-remote="true" href="/mylink" rel="nofollow">delete</a>

The following DOES trigger:

$(document).on("ajax:success"

But the version that does NOT trigger and the one I want to use is:

$("a[data-remote]").on("ajax:success"

Any idea why the $(document) version works while the $("a[data-remote]") version does not? To clarify, it does not work specifically when things are added dynamically. For links that are already on the page they trigger the events just fine.

Note: Turbolinks is removed.

Answer 1

Thats because the .on() event handler doesn't handle the dynamically added elements unless you specify it like this:

$(document).on('ajax:success', 'a[data-remote]', function(){});". 

It works with "$(document)" because the event handler captures the event when it bubbles up to it's parent element, in this case 'document'.

You should add the event handler to the parent element that contains all 'a[data-confirm]' so it doesn't filter each event, or you could specify like the code above.

Here's more on event bubbling and capturing .