How do I correctly use Javascript callbacks for deeply nested forms?

[OscarHeller]

Example:

I have a User that displays any number of nested Projects, and each of those Projects has any number of nested Tasks. This works fine. The problem is when I try to use a Javascript callback (e.g. cocoon:before-remove) on the Projects container, and a second instance of the same callback on the Tasks container. Clicking the Remove Task link triggers the event for the Projects container, presumably because the #projects div is a parent of the #tasks div and thus the cocoon:before-remove event is firing in both containers.

How should I do this? Assume the use case is that I want to display a different confirm message for each of the two cases (i.e. "Are you sure you want to remove this project?" and "Are you sure you want to remove this task?".

Thanks!

[nathanvda]

If you want a simple confirmation, you can use the following code (as we just wrap the normal link_to) :

= link_to_remove_association "remove task", f, data: {confirm:  'do you really want to do this?'}

However, if you really want to use the before-remove event, you can also make sure that the event stops propagating, using event.stopPropagation()

[OscarHeller]

I'm still not having luck with stopPropagation but the confirm method seems to be working. Thanks!