Router init wipes out registered event handlers

[iandunn]

If another plugin registers a direct event callback handler for an element inside the post's content, and it gets registered before o2.Routers.App initializes, then those registrations will be wiped out by this line:

o2/js/app/main.js

Line 44 in 62cb626

o2.$appContainer.html('').show();

That may not be a bug exactly, but it creates unexpected conflicts with other plugins, and is very time-consuming to troubleshoot. There's probably a better way to achieve whatever that code is doing, without breaking other plugins.

Steps to reproduce

1. Add the code below to mu-plugins/foo.php:
2. Deactivate o2 plugin
3. Load a post on the front end of the site
4. Open the dev console
5. Click on the click me text at the bottom of the post, see the event logged in the console, to indicate that it's working
6. Activate the o2 plugin and repeat the above, you'll see that nothing happens.
7. Do any of the workarounds below and you'll see it start working again

add_filter( 'the_content', function( $content ) {
	ob_start();

	?>

	<div id="foo">click me</div>

	<?php

	return $content . ob_get_clean();
} );

add_action( 'wp_print_scripts', function() {
	?>

	<script>
		document.addEventListener( 'DOMContentLoaded', function(event) {
			document.getElementById( 'foo' ).addEventListener( 'click', function( event ) {
				console.log( { event } );
			} );
		} );
	</script>

	<?php
} );

Workarounds

Here are some ways that plugins can work around this bug until it's fixed.

1. Wrap callback registration in jQuery(document).on( 'ready.o2', function() {}
2. Register callbacks with delegated handlers; e.g., jQuery.on( event, selector, data, handler ) (the new version of the old jQuery.live() )
3. Use wp_print_footer_scripts instead of wp_footer_scripts
4. If using wp_enqueue_script, pass the true var for the footer param (untested, but I'm guessing it'd work)