"ajaxInclude" event fires before the DOM has been updated when using data-replace

[jmmcduffie]

This makes it difficult to manipulate the new content that has been inserted because it creates a race condition: at the time that the event is fired, the DOM has not yet been updated, so there is no guarantee that the DOM will have been updated by the time that any registered event handlers begin to run. (In my experience, the event handlers always run before the DOM has been updated.)

I forked the repo and starting working on a solution but I cannot think of one that doesn't involve changing the API. trigger can't be called on an element that isn't in the DOM (which I'm assuming is why you forked that part of the code to trigger before updating for replaceWith only), so there doesn't seem to be a way to have data-replace trigger the event on the element itself like the other methods can.

Obviously I'm not exactly offering any answers here but I wanted to at least get a discussion going about this and see if @scottjehl or other curators of the library have an opinion about it.

[johnbender]

https://github.com/filamentgroup/Ajax-Include-Pattern/commit/ea7bfacbc1b4414faf0d8e61c7c25edd286f016e#diff-16544b26eebb3430425993125e0888aaR106

Cause is there along with a comment. The following is working for us on a client project and should probably be applied in the repo with a note in the docs about binding to a parent element when using data-replace

var $content = $( content );
targetEl[ el.data( "method" ) ]( $content );
$content.trigger( "ajaxInclude", [ content ] );